Archivi tag: menu

Rollover veloce senza precaricamento

11 Febbraio 2009 Giovanni Caputo Lascia un commento

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

Programmazione, Siti Web

Creare un Imagemenu

27 Agosto 2008 Giovanni Caputo Lascia un commento

Imagemenu è una risorsa per web designer che consente di creare un menu orizzontali in Javascript che mostra le immagini intere passandoci sopra con il mouse.

Imagemenu è compatibile con Firefox 2 (mac / pc), Internet Explorer 6, Internet Explorer 7 e Safari (Mac) e richiede Mootools.

DEMO online

Continua la lettura di Creare un Imagemenu →

Programmazione, Siti Web, tutorial

Creare menu di apple.com

18 Luglio 2008 Giovanni Caputo Lascia un commento

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.

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

Informatica, tecnologia, programmazione, fai da te, papercraft e papertoy