Codice HTML per creare un menu come quello di Facebook

Da **Admin** Gio Apr 19, 2012 8:16 pm

State progettando un sito in stile Facebook, ma vi manca il pezzo forte: la barra del menu.
Tranquillo, allora sei venuto nel sito giusto per prendere il codice per creare la barra menu in stile Facebook Wink

! Il codice è il seguente:

Codice:: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> <html> <head> <meta http-equiv="content-type" content="text/html; charset=iso-8859-1"> <meta name="generator" content="HAPedit 3.1"> <style type="text/css"> html,body{margin:0;padding:0} body{background:#FFF;color:#333} div#container{width:850px;margin:0 auto;background: #3B5998;color:#fff} /*CSS principale per il menu*/ ul#nav{font: 70%/1.5 Verdena,Tahoma,sans-serif} ul#nav,ul#nav li,ul#nav ul,ul#nav ul li{margin:0;padding:0;list-style-type:none} ul#nav{height:26px;line-height:25px;margin-left:50px; background: #3B5998;color: #fff} ul#nav a{display:block;padding: 0 15px;text-decoration: none; color:#FFF} ul#nav li{float: left;position: relative} ul#nav li li{float: none;line-height: 22px; display:block !important;display: inline; /*IE*/} ul#nav ul{position: absolute;top: 23px;left: -9999px; width: 12em;background: #fff;color: #3B5998} ul#nav ul{padding: 7px 0;border: 1px solid #3B5998} ul#nav li li a{height:22px} /*fix per IE */ ul#nav ul,ul#nav li li a{background-color: #FFF;color: #3B5998} ul#nav li:hover,ul#nav a:hover{background-color: #5C75AA;color: #FFF} ul#nav li:hover ul,ul#nav li.sfhover ul{left: -1px;z-index: 100} /*regole per separatore e le icone */ ul#nav li.sep{height: 34px;background: #fff} ul#nav li.sep span{display: block;height: 1px;overflow: hidden; margin: 6px 5px 0;background: #CCC} ul#nav li li.icon a{padding-left: 24px} ul#nav li li.settings a{background: url(icon_settings.gif) no-repeat 3px 3px} ul#nav li li.privacy a{background: url(icon_padlock.gif) no-repeat 3px 3px} </style> </head> <body><div id="container"> <ul id="nav"> <li> <a href="#"><strong>Home</strong></a> </li> <li> <a href="#"><strong>E-Mail</strong></a> <ul> <li><a href="#">Componi mail</a></li> <li class="sep"><a href="#">Inbox</a><span></span></li> <li><a href="#">Invia mail</a></li> <li><a href="#">Cartella Spam</a></li> </ul> </li> <li> <a href="#"><strong>Modifica</strong></a> <ul> <li class="icon settings"><a href="#">Account</a></li> <li class="icon privacy"><a href="#">Privacy</a></li> </ul> </li> </ul> </div> </body> </html>

La composizione del codice mi sembra abbastanza facile e non sia necessario inserire una guida dettagliata, ma possiamo comunque aiutarvi se non siete capaci Wink

.