Voglio presentare a tutti i web master e web designer un menu con CSS e jQuery:
Archivi tag: menu
Drop down menu con jQuery
Una serie di menu realizzati con jQuery:
Sexy Drop Down Menu with jQuery and CSS
How to Create a Drop Down Nav Menu with HTML5, CSS3, and jQuery
Mega Drop Down Menus with CSS & jQuery
Create the Fanciest Drop Down Menu You Ever Saw
Easy to Style jQuery Drop Down Menu
jQuery Drop Down Menu for RSS Subscription
Animated Drop Down Menu with jQuery
Reinventing a Drop Down with CSS and jQuery
jQuery Menu: Dropdown, Drilldown, and iPod Flyout Styles
jdMenu Hierarchical Menu Plugin
Create a MultiLevel Dropdown Menu with CSS and Improve it with jQuery
CSS3 and jQuery Dropdown Navigation in WordPress
Make a Mega Drop Down Menu with jQuery
Tecniche di navigazione con CSS
. The Menu menu .
2. Pure CSS hover menu
3. Matte CSS Menu
4. CSS Blur Menu
5. CSS Navigation with Glowing Icons
6. CSS Sliding Door using only 1 image
7. Navigation Matrix Reloaded
8. CSS Horizontal Menu
9. Woody CSS Menu
10. Advanced CSS Menu
11. Simple Yellow Tabbed
12. Vimeo-Like Top Navigation
13. Apple Like Colorful CSS Menu
14. CSS Hoverbox
15. Big CSS Box
16. Simple CSS-based drop-down menu
17. Two Level Horizontal Navigation in CSS
19. CSS-Only Accordion Effect
20. Tabbed Navigation Using CSS
21. CSS Mini Tabs (the UN-tab, tab)
22. Drop-Down Menus, Horizontal Style
23. List Into a Navigation Bar
24. CSS Tabs with Submenus
25. CSS Block Navigation Menu
.
26. XHTML & CSS Sprite Navigation
27. XHTML CSS Tabbed Menu
28. Cool, Simple, Horizontal CSS Menu
29. CSS Menu with Descriptions
30. CSS Hover Button
Rollover veloce senza precaricamento
Molto spesso capita, durante la creazione di un sito web, di voler ottenere un testo con effetto rollover con delle immagini.
Per ottenere un buon effetto, è necessario utilizzare un precaricamento di tutte le immagini utilizzate nelle hover che fà però aumentare il numero di richieste HTTP al server.
Ad esempio dobbiamo avere gli elementi <a con display:block
; e le proprietà di padding e background con immagini per le a
, a:hover
e a:active
per ottnere un rollovere.
Quindi avremo del codice CSS di questo tipo:
#menu a {
...
background: url("button.gif") top left no-repeat;
}
#menu a:hover {
...
background-image: url("button-over.gif");
}
#menu a:active {
...
background-image: url("button-active.gif");
}
/* etc… */
Per semplificare il rollovere spesso è utilizzato una sola immagine che contiente tutti i vari stati del bottone: normale, :hover, and :active.
In questo modo avremo una sola immagine che si sposta modificando il background position, ad esempio con il seguente codice CSS:
#menu a {
background: url("button.gif") 0 0 no-repeat;
...
}
#menu a:hover {
background-position: -157px 0;
...
}
#menu a:active {
background-position: -314px 0;
...
}
Se volete ottenere qualcosa di più complicato potete visualizzare il video al seguente link:
LINK
DVD con menu personalizzati
DVDStyler è un software open source gratuito che ci permette di creare dei DVD personalizzati, dove possiamo aggiungere video e creargli una struttura con tante opzioni per menù e grafica.
Creare menu css online con CSS menu Builder
http://www.cssmenubuilder.com
Tool online che permette di creare e scaricare menu in css sia orizzontali che verticali.
Menu di navigazione: Trends ed Esempi
Volevo segnalare un articolo dove si parla dei munù di navigazione attraverso alcuni esempi, che mostrano i trend nei vari siti famosi.
Creare un Imagemenu
Creare menu di apple.com
Se si vuole ricreare il menu del sito della apple bisogna creare due file:style.css and a menu.html con il seguente codice:
menu.html
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html><head>
<title>Apple's menubar</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head><body>
<!--googleoff: all-->
<div id="globalheader">
<ul id="globalnav">
<li id="gn-apple"><a href="/">Apple</a></li>
<li id="gn-store"><a href="http://store.apple.com">Store</a></li>
<li id="gn-mac"><a href="/mac/">Mac</a></li>
<li id="gn-ipoditunes"><a href="/itunes/">iPod + iTunes</a></li>
<li id="gn-iphone"><a href="/iphone/">iPhone</a></li>
<li id="gn-downloads"><a href="/downloads/">Downloads</a></li>
<li id="gn-support"><a href="/support/">Support</a></li>
</ul>
</div><!--/globalheader-->
<!--googleon: all--></body>
</html>style.css
/* GLOBALHEADER */
#globalheader { width: 982px; height: 38px; margin: 18px auto; position: relative; z-index: 9998; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; width: 117px; height: 0; padding-top: 38px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(globalnavbg.png); _background-image: url(http://images.apple.com/global/nav/images/globalnavbg.gif); background-rep
eat: no-repeat; }/* BUTTONS */
#globalheader #globalnav li#gn-store a { background-position: 0 0; }
#globalheader #globalnav li#gn-store a { background-position: -117px 0; }
#globalheader #globalnav li#gn-mac a { background-position: -234px 0; }
#globalheader #globalnav li#gn-ipoditunes a { background-position: -351px 0; }
#globalheader #globalnav li#gn-iphone a { background-position: -468px 0; }
#globalheader #globalnav li#gn-downloads a { background-position: -585px 0; }
#globalheader #globalnav li#gn-support a { background-position: -702px 0; }/* OVER STATES */
#globalheader #globalnav li#gn-apple a:hover { background-position: 0 -38px; }
#globalheader #globalnav li#gn-store a:hover { background-position: -117px -38px; }#globalheader #globalnav li#gn-mac a:hover { background-position: -234px -38px; }
#globalheader #globalnav li#gn-ipoditunes a:hover { background-position: -351px -38px; }#globalheader #globalnav li#gn-iphone a:hover { background-position: -468px -38px; }
#globalheader #globalnav li#gn-downloads a:hover { background-position: -585px -38px; }
#globalheader #globalnav li#gn-support a:hover { background-position: -702px -38px; }* PRESSED STATES */
#globalheader #globalnav li#gn-apple a:active { background-position: 0 -76px; }#globalheader #globalnav li#gn-store a:active { background-position: -117px -76px; }
#globalheader #globalnav li#gn-mac a:active { background-position: -234px -76px; }
#globalheader #globalnav li#gn-ipoditunes a:active { background-position: -351px -76px; }
#globalheader #globalnav li#gn-iphone a:active { background-position: -468px -76px; }
#globalheader #globalnav li#gn-downloads a:active { background-position: -585px -76px; }
#globalheader #globalnav li#gn-support a:active { background-position: -702px -76px; }/* ON STATES */
#globalheader.home #globalnav li#gn-apple a:hover { background-position: 0 0; cursor: default; }
#globalheader.store #globalnav li#gn-store a { background-position: -117px -114px !important; }
#globalheader.mac #globalnav li#gn-mac a { background-position: -234px -114px !important; }
#globalheader.ipoditunes #globalnav li#gn-ipoditunes a { background-position: -351px -114px !important; }
#globalheader.iphone #globalnav li#gn-iphone a { background-position: -468px -114px !important; }
#globalheader.downloads #globalnav li#gn-downloads a { background-position: -585px -114px !important; }
#globalheader.support #globalnav li#gn-support a { background-position: -702px -114px !important; }Avete infine bisogno dell'immagine di backgound del menu del sito della apple. Salvatela nella stessa directory del file html e del file css.
Naturalmente potete modificare l'immagine per personalizzare il vostro menu.
Generare menu css online
Ecco un sito utile ai web designer: cssmenumaker , un sito che permette di generare direttamente online menu css scegliendoli tra template di menu già pronti. Disponibili menu orrizzontali, vericatli e drop-down