28172 sujets

CSS et mise en forme, CSS3

MENU horizontal 2 niveaux

Bonjour à tous,

J'ai réalisé un menu à 2 niveaux en HTML5 et CSS3/2.1, adapté sur tous les navigateurs récents ainsi qu'IE 7 à 9 et je souhaite ainsi le partager.
D'ailleurs, si vous voyez qq défauts, n'hésitez pas à me corriger et critiquer !

http://i45.servimg.com/u/f45/12/75/44/40/apercu10.jpg

Ce que j'ai utilisé :
- font-face
- border-radius (PIE.htc pour IE)
- text-shadow
- inline-block (inline + zoom:1 pour IE)
- Float:left pour le submenu et ainsi récupérer les puces
- "X-UA-Compatible" content="IE=edge" pour forcer l'affichage d'un IE récent

Particularités :
- un header de hauteur 246px avec un background
- menu de hauteur 44px
- un input text avec une image background + coins arrondis IE et navigateurs récents
- ajout de jquery pour cet input afin de récupérer/supprimer le 'value' au focus/blur
- ajout de "nth-last-child(-n+4)" que je ne connaissais pas, merci à gc-nomade (gcyrillus) et pour son coup de main Smiley smile 


<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<title>exo2 - menu 2 niveaux</title>

<link href="css/style.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/menuh.css" media="screen" rel="stylesheet" type="text/css" />
<link href="css/normalize.css" media="all" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.2.js"></script>
<script type="text/javascript" src="js/focusblur_jquery.js"></script>
<!--[if lt IE 9]><script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script><![endif]-->
<!--[if lte IE 7]><link href="css/ie.css" media="screen" rel="stylesheet" type="text/css" />
<![endif]-->
</head>

<body>

<header>    
    <div class="centrage_logo_menu"> 
        <nav>
            <ul class="menu">
                <li><a href="#" id="menuh_home" title="Accueil" ><span>Accueil</span></a></li><!--
             --><li><a href="#">MENUH - HTML</a><!--
                 --><ul class="submenu" id="submenu">
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                        <li><a href="#">Lien 3</a></li>
                        <li><a href="#">Lien 4</a></li>
                        <li><a href="#">Lien 5</a></li>
                        <li><a href="#">Lien 6</a></li>
                        <li><a href="#">Lien 7</a></li>
                        <li><a href="#">Lien 8</a></li>
                        <li><a href="#">Lien 9</a></li>
                        <li><a href="#">Lien 10</a></li>
                    </ul>
                </li><!--
             --><li><a href="#">MENUH - HTML / CSS</a><!--
                 --><ul class="submenu">
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                    </ul>
                </li><!--
             --><li><a href="#">JAVASCRIPT</a>
                    <ul class="submenu">
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                        <li><a href="#">Lien 3</a></li>       
                    </ul>
                </li><!--
             --><li><a href="#">JQUERY</a>
                    <ul class="submenu">
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                        <li><a href="#">Lien 3</a></li>
                        <li><a href="#">Lien 4</a></li>           
                    </ul>
                </li><!--
             --><li><a href="#">AJAX</a>
                    <ul class="submenu">
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                        <li><a href="#">Lien 3</a></li>
                        <li><a href="#">Lien 4</a></li>      
                        <li><a href="#">Lien 5</a></li>
                        <li><a href="#">Lien 6</a></li>
                        <li><a href="#">Lien 7</a></li>
                        <li><a href="#">Lien 8</a></li>
                        <li><a href="#">Lien 9</a></li>    
                    </ul>
                </li><!--
             --><li><a href="#">MENUH - HTML</a>
                    <ul class="submenu">
                        <li><a href="#">Lien 1</a></li>
                        <li><a href="#">Lien 2</a></li>
                        <li><a href="#">Lien 3</a></li>
                        <li><a href="#">Lien 4</a></li>
                    </ul>
                </li><!--
             --><li><a href="#">CONTACT</a></li><!--
             --><li>
                    <form action="#" method="get" class="searchform">
                        <input type="text" class="searching" value="Search..." name="s">
                    </form>
                </li>
            </ul>
        </nav>
    </div>
</header>

<div class="clear"></div>


fichier css général

/* #################### GENERAL #################### */
@font-face {
	font-family: 'helveticacondensed';
	font-weight:normal;
	font-style:normal;
	src:url("../helveticacondensed/helvcond.eot") format('eot'); /* IE */
	src:url("../helveticacondensed/helvcond.woff") format("woff"), url("../helveticacondensed/helvcond.ttf") format("truetype"), url("../helveticacondensed/helvcond.svg") format("svg");
}

/* #################### HEADER #################### */
header {position:relative;z-index:10;background:white url(../images/header_background.jpg) repeat-x;height:246px}
.centrage_logo_menu {position:relative;width:960px;margin:0 auto}


Feuille de style pour le menuh
/* =============================================================================
   Menu
   ========================================================================== */
nav {position:absolute;top:202px}
.menu {
	position:relative;
	font-family:helveticacondensed,"helveticacondensed", sans-serif, Helvetica, Arial;
	font-size:0.75em;
	display:block;
	line-height:44px;
	width:960px;
    padding:0;
	list-style:none;
    margin:0 auto;
	border:0;
	cursor:pointer;
	background:url(../images/menuh_background_1x44px.gif) repeat-x;
	border-radius:6px;
}
#menuh_home {
  display:block;
  width:35px;
  height:30px;
  margin:auto;
  background:url(../images/menuh_home_35x60px.gif) 0 0 no-repeat;
}
#menuh_home:hover,#menuh_home:active,#menuh_home:focus {background-position:0 -30px}
#menuh_home span{
  display:inline-block;
  *display:inline;
  zoom:1;
  text-indent: -5000px;
}
.menu > li  {
	display:inline-block;
	margin:0;
	padding:0 8px;
	border:0;
    text-align:center;
   	position:relative;
   	border-left:solid 1px #f47840;
	text-shadow:2px 1px 1px #333; /* jquery-text-shadow */
}
.menu > li:first-child {width:45px;border:none;padding:0;vertical-align:middle}
.menu > li:first-child a {padding:0px}
.menu > li > a {padding:7px 15px 15px 15px;color:white;text-decoration:none}
.menu > li + li:hover > a {
	position:relative;
	z-index:10;
	background:white url(../images/menuh_fleche_12x8px.gif) no-repeat right center;
	padding:7px 15px 15px 15px;
	color:orange;
	border-radius:6px 6px 0 0;
	text-shadow:none; /* jquery-text-shadow */
}
.submenu {
	display:block;
	z-index: 1;
	text-align: left;
	margin: 0;
	padding: 0;
	border: 0;
	width: 300px;
	background: white;
	position: absolute;
	left: -9999px; /* Disparition de SUBMENU */
	box-shadow: 0px 0px 10px #d83d00;
	border-radius: 0 0 6px 6px;
	text-shadow:none; /* jquery-text-shadow */
}
.submenu li {
	float:left;
	border-left:none;
	text-align:left;
	width:138px;
	padding:0;
	margin-left:9px;
	list-style:url(../images/menuh_submenu_fleche8x7px.gif) inside;
}
.menu li:hover .submenu {border-radius:0 0 6px 6px;left:8px} /* Apparition de SUBMENU */
.menu li:nth-last-child(-n+4):hover .submenu {right:8px;left:auto}
.submenu li a {background:none!important;color:grey!important;text-decoration:none}
.submenu li:hover {list-style:url(../images/menuh_submenu_fleche8x7px_hover.gif) inside;}
.submenu li:hover a {color:orange!important;text-decoration:underline;}
.submenu li + li + li {border-top:dotted 1px silver}
.searching {
	height:20px;
	width:100px;
	line-height:20px;
	padding-left:20px;
	font-size:11px;
	background:white url(../images/search.gif) left center no-repeat;
	font-family:"Times New Roman", Times, serif;
	border:none;
	border-radius:12px;
}
.searching:hover, .searching:active, searching:focus {background:white url(../images/search_hover.gif) left center no-repeat}


fichier css IE
.menu {
	font-size:11px;
	height:44px;
	border-radius:8px;
	behavior: url("pie/PIE.php");
}
.menu li {display:inline;zoom:1;margin:0;padding:0 8px;}
.menu li:hover .submenu {left:6px;}
.submenu {
	display:inline;
	zoom:1;
	top:44px;
	border-radius: 0 0 6px 6px;
	behavior: url("pie/PIE.php");
}
.searchform {margin:0;padding:0}
.searching {border-radius:12px;behavior: url("pie/PIE.php")}


le fichier focusblur_jquery.js 
$(document).ready(function() {  
    $('input[type="text"]').focus(function() {     
        if (this.value == this.defaultValue){
            this.value = '';
        }
        if(this.value != this.defaultValue){
            this.select();
        }
    });
    $('input[type="text"]').blur(function() {      
        if (this.value == ''){
            this.value = this.defaultValue;
        }
    });
});


Voili voilou Smiley smile
Modifié par gringo (25 Jul 2012 - 10:17)
bonsoir,

je crois me souvenir t'avoir dit d'enlever les height:44px, car ton line-height est suffisant et seulement a partir des li de premier niveau. Le conteneur principal s’adaptera à la hauteur du contenu qui reste dans le flux.

Manque aussi le CSS que tu sert a IE7 Smiley smile

++
C'est fait, j'ai modifié qq peu le code HTML et un peu aussi le CSS menuh.

Le problème sur IE compatibilité vient apparement de mon formulaire de recherche.

Je n'ai pas non plus trouvé encore la solution pour faire mon :hover sur le 1er niveau en rapport avec le second (cf. screen)
Pour IE7 , (ah si , je vois le css que tu lui sert), un test ne vaut que dans un vrai IE7 et pas un IE9 en mode IE7.

Pour le fomulaire, un R.A.Z. sur les margin et padding de form pourrait aider.

L'idéal serait une page en ligne .

++
Modifié par gc-nomade (13 Jul 2012 - 18:48)
J'ai édité mon 1er lien de façon à ce qu'il soit en ligne Smiley smile
Re édité Smiley smile
Modifié par gringo (17 Jul 2012 - 17:48)
Bonjour,

J'aurais bien voulu l'essayer mais, mise à part pour les fichiers focusblur_jquery.js et menuh.css (Feuille de style pour le menuh) qui sont bien nommés, je ne comprends pas quel bloc copier pour les fichiers :

- style.css
- normalize.css

Merci
Sujet clos
Aller à