Salve a tutti, ho scaricato da internet un menu responsive realizzato esclusivamente in css3 e html e l'ho adattato al mio sito. Vorrei però apportare un ultima modifica: il menù si adatta ad ogni risoluzione occupando l'intera pagina in larghezza, io invece vorrei che occupasse al max 960px.
Ci sto sbattendo la testa da una settimana, ma proprio non ci riesco.
Qualcuno potrebbe darmi una mano gentilmente?
Grazie mille
codice HTML:<!DOCTYPE html><html lang="en"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1" /><meta name="description" lang="en" content="A responsive CSS-only multi-level menu, with horizontal drop-down desktop view and vertical off-canvass view for mobile."/><title>Responsive CSS3 Multi-Level, Drop-Down Menu (no JavaScript)</title> <style> html, body { margin:0; padding:0; height:100%; position:relative; background:#222; font:16px/1.75em Verdana, Arial, Helvetica, sans-serif }body { overflow-x:hidden; -webkit-animation:androidbugfix infinite 1s } @-webkit-keyframes androidbugfix { from {padding:0} to {padding:0} }#header { position:relative; top:0; left:0; right:0; height:4.0625em; background:#222 }#header label { padding:0 0.125em; font:2.875em/1.4375em Arial }#menu label { padding:0 0.25em; font:3.125em/1.375em Arial }#menu .sub-nav .toggle { padding:0 0.3125em; font:2em/2em Arial; top:0 }#header label:hover, #menu label:hover { color:#ccc }#main-nav-check, #menu .sub-nav-check { position:absolute; top:-9999px; left:-9999px }.toggle { position:absolute; right:0.15em; cursor:pointer; color:#fff }.container { background:#fff; min-height:100%; padding:0; margin:0 }#menu, #menu .sub-nav { position:absolute; top:0; bottom:0; width:13.75em; background:#222; z-index:9999; left:-13.75em }.container, #menu, #menu .sub-nav { -webkit-transform:translate(0,0); -ms-transform:translate(0,0); transform:translate(0,0); -webkit-transition:-webkit-transform .25s ease; transition:transform .25s ease; }#menu ul { background:#222; line-height:2.75em; text-decoration:none; padding:0; list-style:none; margin-top:4.0625em; border-top:1px solid #444 }#menu li { border-bottom:1px solid #444 }#menu li a { display:block; font-size:0.875em; padding-left:1.5em; color:#fff; text-decoration:none }#menu li a:hover, #menu .toggle-sub:hover { background:#333 }#menu .sub-nav { margin-top:-1px }#menu .sub-heading { margin-top:4.0625em; padding-left:1.3125em; color:#999 }#menu .sub-heading:before { content:""; display:block; height:1px; width:13.75em; margin-left:-1.3125em; background:#444 }#menu .toggle-sub { font:bold 1em/2.75em Arial; color:#fff; background:#222; float:right; margin-top:-2.75em; width:2.25em; border-left:1px solid #444; cursor:pointer; text-align:center }.container, #menu, #menu .sub-nav { -webkit-transform:translate3d(0,0,0) } /* #### - define ids of animated container, menu and sub-menus here - #### */#main-nav-check:checked ~ .container,#main-nav-check:checked ~ #menu,#menu .sub-nav-check:checked ~ #fof-sub, #menu .sub-nav-check:checked ~ #fof-portfolio-sub, #menu .sub-nav-check:checked ~ #fof-portfolio-graphics-sub,#menu .sub-nav-check:checked ~ #fof-services-sub, #menu .sub-nav-check:checked ~ #fof-services-seo-sub,#menu .sub-nav-check:checked ~ #fast-apps-sub,#menu .sub-nav-check:checked ~ #jemcon-sub,#menu .sub-nav-check:checked ~ #jemcon-previous-sub { -webkit-transform:translate(13.75em,0); -ms-transform:translate(13.75em,0); transform:translate(13.75em,0) } @media ( min-width:60em ) { /* #### - switch to desktop menu at 960px (960/16=60 - 16px being default browser font-size) - #### */ #menu label, #menu .sub-nav, #menu .sub-heading, #header label { display:none } #menu { left:auto; bottom:auto; height:0; width:100% } #menu > ul { float:right; position:relative; z-index:1; top:0.4285em; right:1em; margin-top:0; display:inline-table; border-left:1px solid #444; border-right:0; font-size:0.875em } #menu ul:after { content:""; clear:both; display:block } #menu ul li { float:left; position:relative; text-align:left; border-right:1px solid #444 } #menu ul li a { padding:0.5em 2.5em 0.5em 1.5em } #menu ul li a:only-child { padding-right:1.5em } #menu ul li a:after { content:"\203A"; position:absolute; right:0.5em; margin-top:-1.5625em; display:block; font:1.5em Arial; -webkit-transform:rotate(90deg); -ms-transform:rotate(90deg); transform:rotate(90deg) } #menu ul li a:only-child:after { content:"" } #menu ul li:hover > a { background:#333; -webkit-transition:background-color .25s ease; transition:background-color .25s ease } #menu ul li:hover > ul { display:block } #menu ul ul { position:absolute; left:0; margin-left:-1px } #menu ul ul li { float:none; width:13.75em; border-left:1px solid #444 } #menu ul ul li a { padding:0 1.5em } #menu ul ul li a:after { right:0.375em; margin-top:-1.6875em; -webkit-transform:none; -ms-transform:none; transform:none } #menu ul .sub-nav { top:auto; bottom:auto; left:auto; width:auto; margin-top:0 } #menu ul ul .sub-nav { float:left; top:0; left:13.75em; margin-left:0; margin-top:-1px } #menu ul .fly-left ul { left:-13.75em; margin-left:-2px } #menu ul .fly-left a:after { right:auto; left:0.5em; left:0.375em; margin-top:-1.5625em; -webkit-transform:rotate(-180deg); -ms-transform:rotate(-180deg); transform:rotate(-180deg) } } .page-content { padding:1em 2em; max-width:64em; margin:auto }.page-content:after { display:block; content:""; height:1px } code { display:block; background:#ebebeb; font-size:0.875em; padding:1em 2em; overflow-x:scroll; white-space:nowrap } </style> </head><body> <input type="checkbox" id="main-nav-check"/><div id="menu"> <label for="main-nav-check" class="toggle" onclick="" title="Close">×</label> <ul> <li><a href="http://fofwebdesign.co.uk/">Focus on Function</a> <label for="fof" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="fof" class="sub-nav-check"/> <ul id="fof-sub" class="sub-nav"> <li class="sub-heading">Focus on Function <label for="fof" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">About</a></li> <li><a href="#">Contact</a></li> <li><a href="#">FAQs</a></li> <li><a href="#">Help: Videos & Guides</a></li> <li><a href="#">Portfolio</a> <label for="fof-portfolio" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="fof-portfolio" class="sub-nav-check"/> <ul id="fof-portfolio-sub" class="sub-nav"> <li class="sub-heading">Portfolio <label for="fof-portfolio" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">Graphics & Artwork</a> <label for="fof-portfolio-graphics" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="fof-portfolio-graphics" class="sub-nav-check"/> <ul id="fof-portfolio-graphics-sub" class="sub-nav"> <li class="sub-heading">Graphics & Artwork <label for="fof-portfolio-graphics" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">Artwork</a></li> <li><a href="#">Graphics</a></li> <li><a href="#">Logos</a></li> <li><a href="#">Photography</a></li> </ul> </li> <li><a href="#">Script Development</a></li> <li><a href="#">Website Design</a></li> </ul> </li> <li><a href="#">Services</a> <label for="fof-services" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="fof-services" class="sub-nav-check"/> <ul id="fof-services-sub" class="sub-nav"> <li class="sub-heading">Services <label for="fof-services" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">Content Management</a></li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Script Development</a></li> <li><a href="#">SEO</a> <label for="fof-services-seo" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="fof-services-seo" class="sub-nav-check"/> <ul id="fof-services-seo-sub" class="sub-nav"> <li class="sub-heading">SEO <label for="fof-services-seo" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">In-Page Optimisation</a></li> <li><a href="#">Speed Optimisation</a></li> </ul> </li> <li><a href="#">Web Development</a></li> </ul> </li> </ul> </li> <li><a href="http://fast-edit.co.uk/">Fast Edit (flat file CMS)</a></li> <li><a href="http://fast-apps.co.uk/">Fast Apps</a> <label for="fast-apps" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="fast-apps" class="sub-nav-check"/> <ul id="fast-apps-sub" class="sub-nav"> <li class="sub-heading">Fast Apps <label for="fast-apps" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">Fast Logs</a></li> <li><a href="#">Fast Feed</a></li> <li><a href="#">Fast Warn</a></li> </ul> </li> <li><a href="http://www.jemcon.org/">JemCon.org</a> <label for="jemcon" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="jemcon" class="sub-nav-check"/> <ul id="jemcon-sub" class="sub-nav"> <li class="sub-heading">JemCon.org <label for="jemcon" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">JemCon 2014</a></li> <li class="fly-left"><a href="#">Previous JemCons</a> <label for="jemcon-previous" class="toggle-sub" onclick="">►</label> <input type="checkbox" id="jemcon-previous" class="sub-nav-check"/> <ul id="jemcon-previous-sub" class="sub-nav"> <li class="sub-heading">Previous JemCons <label for="jemcon-previous" class="toggle" onclick="" title="Back">◄</label></li> <li><a href="#">JemCon 2013</a></li> <li><a href="#">JemCon 2012</a></li> <li><a href="#">JemCon 2011</a></li> <li><a href="#">JemCon 2010</a></li> <li><a href="#">JemCon 2009</a></li> <li><a href="#">JemCon 2008</a></li> <li><a href="#">JemCon 2007</a></li> <li><a href="#">JemCon 2006</a></li> <li><a href="#">JemCon 2005</a></li> </ul> </li> <li><a href="#">Messageboard</a></li> </ul> </li> <li><a href="http://www.dynamicdrive.com/">Dynamic Drive</a></li> </ul></div><!-- closing "#menu" --> <div class="container"> <div id="header"> <a href="/"><img src="/template/images/logo-50x50.png" style="position:absolute; top:0.5em; left:1em; width:3em; height:3em; border:0" alt="Home" title="Home"/></a> <span style="position:absolute; top:1.175em; left:5em; color:#fff">Focus on Function</span> <label for="main-nav-check" class="toggle" onclick="" title="Menu">☰</label> </div><!-- closing "#header" --> </body></html>
Rispondi quotando