-
-
Save gcyrillus/5093222 to your computer and use it in GitHub Desktop.
mega menu, prob forum
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| /* mega menu, prob forum */ | |
| #bande{ | |
| position:relative; /*pour placer le menu au-dessus*/ | |
| z-index: 1; | |
| clear: both; | |
| background: url(../interface/menu-background.png) repeat-x top; /*iE*/ | |
| background-size: 100% 100%; | |
| background-image: -o-linear-gradient(270deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*opera 11*/ | |
| background: -webkit-linear-gradient(top, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*Chrome+Safari*/ | |
| background: linear-gradient(180deg, rgba(255,221,54,1)0%, rgba(255,221,54,0)70%, rgba(255,221,54,0)100%); /*future*/ | |
| background-color: #d66f00; | |
| } | |
| #nav{ | |
| position:relative; /*pour placer le menu au-dessus*/ | |
| z-index: 1; | |
| cursor:pointer; | |
| font-weight: bold; | |
| font-variant: small-caps; | |
| color: #000; | |
| max-width: 54.5em; | |
| min-width: 740px; | |
| margin: 0 auto; | |
| padding:0 ; | |
| display:table;; | |
| } | |
| #nav ul{ | |
| list-style: none outside none; | |
| line-height:1.54em; | |
| list-style: none; | |
| margin:0; | |
| padding:0; | |
| } | |
| #nav.EN ul{ width: 49.5em;} | |
| #IE #nav ul.menu{ width: 55.5em;} | |
| #IE #nav.EN ul{ width: 51.3em;} | |
| #nav ul ul{ | |
| background: -moz-linear-gradient(0deg, rgba(235,210,183,0),rgba(235,210,183,0.14));/*Firefox*/ | |
| background-image: -o-linear-gradient(90deg, rgba(235,210,183,0),rgba(235,210,183,0.14));/*opera 11*/ | |
| background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(rgba(235,210,183,0.14)), to(rgba(235,210,183,0)), color-stop(0.0, rgba(235,210,183,0.14)), color-stop(1.0, rgba(235,210,183,0))); /*Safari*/ | |
| background: linear-gradient(0deg, rgba(235,210,183,0),rgba(235,210,183,0.14));/*future*/ | |
| background-color: rgba(53,42,31,1); | |
| border: 1px solid #CD8F2E; | |
| border-top: none; | |
| display: none; | |
| padding: 20px 0; | |
| position: absolute; | |
| font-size: 1em; | |
| margin: 0 auto; | |
| width: 870px; | |
| left:0; | |
| } | |
| #nav ul ul ul{ | |
| background: none; | |
| border: none; | |
| display: block; | |
| padding: 0 10px; | |
| width: 15em; | |
| } | |
| #nav ul a{ | |
| color: #000000; | |
| text-decoration: none; | |
| vertical-align:top; | |
| } | |
| ul.menu>li{ | |
| border-left: 1px solid rgba(82, 70, 58, 0.1); | |
| border-right: 1px solid rgba(255, 255, 255, 0.2); | |
| float:left; | |
| font-size: 0.85em; | |
| margin:0; | |
| padding:0 | |
| } | |
| #IE ul.menu>li{ } | |
| #nav ul li img{ | |
| margin: 0 0 8px; | |
| vertical-align: middle; | |
| } | |
| #nav ul ul li{ | |
| border-left: 1px solid rgba(82, 70, 58, 0.1); | |
| border-right: 1px solid rgba(255, 255, 255, 0.2); | |
| line-height: 1.54em; | |
| display:inline; | |
| float: left; | |
| width: 33%; | |
| } | |
| #nav .media ul li{ ;} | |
| #nav .support ul li:nth-child(3n+3), | |
| #nav .media ul li+li+li, | |
| #nav .produits ul li:nth-child(2n+3){ border-right: none;} | |
| #nav ul ul li:first-child, | |
| #nav .support ul li:first-child, #nav .support ul li:nth-child(3n+4), | |
| #nav .media ul li:first-child, #nav .media ul li:nth-child(3n+4){border-left: none;} | |
| #nav ul ul ul li{ | |
| border: none; | |
| display: block; | |
| float: none; | |
| width: auto; | |
| height: auto; | |
| } | |
| #nav .contact, #nav .career{margin-right: -6px;} | |
| #nav .accueil a, #nav .contact a { | |
| padding: 0px 9px 0px; | |
| } | |
| #nav ul ul a{ | |
| display: block; | |
| padding: 0; | |
| color: #E3D6C7; | |
| padding: 2px 20px; | |
| } | |
| #nav ul ul li img{ margin: 0;vertical-align:middle} | |
| #nav .media .pro img, #nav .media .galerie img{ margin:0;} | |
| #nav .media .galerie img{ margin-left:-13px;} | |
| #nav .cameras, #nav .pro, #nav .galerie{ | |
| height: 413px; | |
| text-align: center; | |
| } | |
| #nav .produits ul li+li img{ | |
| float: left; | |
| } | |
| #nav .media .pro, #nav .media .galerie{ | |
| height: 300px; | |
| } | |
| #nav li.recherche{ padding-left:3em;} | |
| #nav ul li.toggle{ | |
| background: url(http://www.spypoint.com/interface/images/arrow-menu.gif) 95% -30% no-repeat; | |
| padding-right: 16px; | |
| padding-left: 9px; | |
| color: #000; | |
| } | |
| #nav ul li.toggle.support{ background-position: 96% -30%;} | |
| #nav ul li.toggle.media{ background-position: 90% -30%;} | |
| #nav ul ul li.toggle{ | |
| background: url(http://www.spypoint.com/interface/images/arrowsNext02.gif) no-repeat 97% -10%; | |
| padding: 2px 16px 2px 9px; | |
| } | |
| #nav ul li:hover, | |
| #nav ul li:focus{ | |
| box-shadow: inset 0 1px 0px #CD8F2E; | |
| background-color: rgb(79, 66, 53); | |
| } | |
| #nav ul li:hover, | |
| #nav ul li:focus, | |
| #nav ul li a:hover, | |
| #nav ul li a:focus, | |
| #nav ul a:active { | |
| color: #ffffff; | |
| } | |
| #IE #nav ul li:hover, | |
| #IE #nav ul li:focus {background-color: rgba(53,42,31,1);} | |
| #nav .recherche:hover, | |
| #nav .recherche:focus, | |
| #nav ul ul li:hover, | |
| #nav ul ul li:focus, | |
| #nav ul ul li a:hover, | |
| #nav ul ul li a:focus, | |
| #nav ul ul a:active { | |
| box-shadow: none; | |
| background:none; | |
| } | |
| #nav li.toggle:hover{ background-position: 95% 110%;} | |
| #nav ul li.toggle.distributeurs:hover, #nav ul li.toggle.support:hover{ background-position: 96% 110%;} | |
| #nav ul li:hover ul.subMenu, #nav ul li:focus ul.subMenu, | |
| #nav ul ul li:hover ul.niv3,#nav ul ul li:focus ul.niv3{ | |
| display:block; | |
| z-index: 2000; | |
| } | |
| #nav form{ float: right;} | |
| #nav form label{padding-left: 10px;} | |
| #nav form input { | |
| width: 200px; | |
| margin: 0; | |
| } | |
| #nav form input[type="submit"] { | |
| background: url(http://www.spypoint.com/interface/images/search.png) no-repeat 2% 50% / 90%; | |
| position: relative; | |
| border: none; | |
| margin-right: -20px; | |
| right: 30px; | |
| width: 20px; | |
| } | |
| #nav ul , #nav ul li {margin:0;padding:0;} | |
| #nav ul li {float:left;height:100%;} |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div id="bande"> | |
| <div id="nav"> | |
| <form role="search" method="get" action=""> | |
| <label for="recherche"> | |
| <input id="recherche" type="text" title="recherche" value="" placeholder="recherche" name="q"> | |
| </label> | |
| <input id="recherche-submit" type="submit" name="recherche-submit" value=""> | |
| </form> | |
| <ul class="menu"> | |
| <li class="accueil"> | |
| <a href="/FR/"><img src="http://www.spypoint.com/interface/images/home.png" width="15" height="15" alt="Accueil" /></a> | |
| </li> | |
| <li class="toggle produits">Produits | |
| <ul class="subMenu"> | |
| <li class="cameras"><a href="/FR/cameras/">Caméras de surveillance | |
| <img src="http://www.spypoint.com/Images/photosProduits/BF-10HD/BF-10HD_mini.png" width="97" alt="" /></a> | |
| <ul class="niv3"> | |
| <li><a href="/FR/cameras/IR-Booster/IRB-W.php">Module d'éclairage</a></li> | |
| <li><a href="/FR/cameras/accessoires/">Accessoires</a></li> | |
| <li><a href="/FR/cameras/dummy.php">Fausses caméras</a></li> | |
| <li><a href="/FR/cameras/tous_modeles.php">Fiche de comparaison</a></li> | |
| <li><a href="/FR/cameras/avantages.php">Avantages SPYPOINT</a></li> | |
| </ul> | |
| </li> | |
| <li><a href="/FR/produits/cameras-video/"><img src="http://www.spypoint.com/Images/photosProduits/X-CEL/X-CEL.png" width="95" height="79" alt="" />Caméra vidéo</a></li> | |
| <li><a href="/FR/produits/SDB-85.php"><img src="http://www.spypoint.com/Images/photosProduits/SDB-85/SoundBox.png" alt="" width="67" height="81" />"Soundbox"</a></li> | |
| <li><a href="/FR/produits/WRL.php"><img src="../Images/photosProduits/WRL/WRL_mini.png" alt="" width="44" height="80" />Détecteur de mouvement</a></li> | |
| <li><a href="/FR/produits/produits_audition/"><img src="http://www.spypoint.com/Images/photosProduits/Ear-muffs/EEM.png" alt="" width="59" height="80" />Produits d'audition</a></li> | |
| <li><a href="/FR/produits/HSC.php"><img src="http://www.spypoint.com/Images/photosProduits/HSC/HSC.gif" alt="" width="62" height="79" />Siège Chauffant</a></li> | |
| <li><a href="/FR/produits/plein-air.php"><img src="http://www.spypoint.com/Images/photosProduits/CQ-SPY.png" alt="" width="111" height="80" />Plein Air</a></li> | |
| <li><a href="/FR/produits/produits-dappatage/"><img src="http://www.spypoint.com/Images/photosProduits/AT-/saltpaste.gif" alt="" width="62" height="79" />Produits d'appâtage</a></li> | |
| <li><a href="/FR/produits/opti-max.php"><img src="http://www.spypoint.com/Images/photosProduits/optiMax.png" alt="" width="107" height="80" />Opti-Max</a></li> | |
| </ul> | |
| </li> | |
| <li class="toggle support">Support et service | |
| <ul class="subMenu"> | |
| <li><a href="/FR/support-technique/faq.php">FAQ</a></li> | |
| <li><a href="/FR/support-technique/manuels.php">Manuels</a></li> | |
| <li><a href="/FR/support-technique/maj.php">Mises à jour</a></li> | |
| <li><a target="_blank" href="/download/Catalogue2012_low_FR.pdf">Catalogue 2012</a></li> | |
| <li><a href="/FR/support-technique/telechargement.php">Fichiers téléchargeables</a></li> | |
| </ul> | |
| </li> | |
| <li class="toggle media">Media | |
| <ul class="subMenu"> | |
| <li class="pro"> | |
| <img src="http://www.spypoint.com/Images/Partenaires/HomeCAN/Partenaires_Canada_Intro.png" alt="" width="272" height="139" /><br> | |
| Ils parlent de SPYPOINT<br> | |
| Pro Staff | |
| <ul> | |
| <li><a href="/FR/partenaires/pro-staff-canada.php">Canada</a></li> | |
| <li><a href="/FR/partenaires/pro-staff-usa.php">États-Unis</a></li> | |
| <li><a href="/FR/partenaires/television.php">Télévision</a></li> | |
| </ul> | |
| <li class="galerie"> | |
| <a href="/FR/galerie.php"> | |
| <img width="269" height="126" alt="" src="http://www.spypoint.com/Images/accueil/album3.png"><br> | |
| Galeries | |
| </a></li> | |
| <li><a href="/testimonials.php">Témoignages</a></li> | |
| <li><a href="/FR/archives.php">Nouvelles</a></li> | |
| <li><a href="#">Prix</a></li> | |
| <li><a href="/FR/Presse.php">Presse</a></li> | |
| <li><a href="/FR/expositions.php">Expositions</a></li> | |
| </ul> | |
| </li> | |
| <li class="contact"><a href="/FR/contact.php">Nous contacter</a></li> | |
| </ul> | |
| </div> | |
| </div> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // alert('Hello world!'); |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| {"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment