bonjour bonsoir
j'ai envie de faire une menu déroulant responsive, j'ai le menu qui fonctionne pas trop mal mais il déroule pas quand je luis applique un <ul class="SousMenu"><li> sous menu 01</li><li> sous menu 02</li></ul> que faut t'il faire voici mon code merci d'avaance Smiley smile
-------------------------------------------------------------------------------------------------------
html :
----------------
css
-------------
merci
Modifié par 6l20 (10 Sep 2013 - 09:30)
j'ai envie de faire une menu déroulant responsive, j'ai le menu qui fonctionne pas trop mal mais il déroule pas quand je luis applique un <ul class="SousMenu"><li> sous menu 01</li><li> sous menu 02</li></ul> que faut t'il faire voici mon code merci d'avaance Smiley smile
-------------------------------------------------------------------------------------------------------
html :
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8" />
<title>Magnifilms</title>
<meta name="viewport" content="initial-scale=1">
<link href="css/stylesMenu.css" rel="stylesheet" type="text/css" media="all">
<script src="scripts/jquery.js"></script>
<script src="scripts/fitvids.js"></script>
<script>
$(document).ready(function() {
$(".video").fitVids();
ajouter_bt_menu();
maj_menu();
});
$(window).resize(function() {
maj_menu();
});
function ajouter_bt_menu(){
$('#mainNav ul').before('<div id="bt_menu">☰</div>');
$("#bt_menu").click(function(){
$("#mainNav ul").toggle();
});
}
function maj_menu(){
var sw = document.body.clientWidth;
if (sw < 480) {
$("#bt_menu").show();
$("#mainNav ul").hide();
}
if (sw >= 480) {
$("#bt_menu").hide();
$("#mainNav ul").show();
}
}
</script>
<!--[if IE]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<script src="scripts/respond.js"></script>
<![endif]-->
<script src="scripts/matchmedia.js"></script>
<script src="scripts/picturefill.js"></script>
</head>
<body>
<nav id="mainNav">
<h1>Menu</h1>
<ul>
<li class="active"><a href="index.html" title="Mes dernières trouvailles">Motorisation de Portail</a> </li>
<li><a href="apropos.html" title="Interphone">Interphone Audio Video</a> </li>
<li><a href="contact.html" >Alarme</a></li>
<li><a href="contact.html" >Coffre Fort</a></li>
<li><a href="contact.html" >Radiateur Electrique</a></li>
<li><a href="contact.html" >Poêle à bois</a>
</li>
<li><a href="#">Climatisation</a></li>
<li><a href="contact.html" >Piscine</a></li>
<li><a href="contact.html" >Jardin</a></li>
<li><a href="contact.html" >Electroménager</a></li>
<li><a href="contact.html" >Les Offres Exceptionnelles</a></li>
</ul>
</nav>
</body>
</html>----------------
css
-------------
#mainHeader hgroup h1, #mainNav h1, #related h1, #social h1, #pageFooter h2{
position:absolute;
left:-10000px;
}
/* listes */
#mainNav ul li, #social ul li{
list-style-type:none;
color:white;
text-decoration:none;
display:inline;
}
/* menu */
#mainNav ul{
padding: 10px 1%;
margin:0;
}
#mainNav ul li a{
padding:5px 1%;
text-decoration:none;
color:white;
}
#mainNav ul li.active a{
color:#ed9837;
background:white;
}
body {
width: 90%;
margin: 0 auto;
font-size:100%;
}
#mainHeader{
background:#218e8e;
}
#mainNav{
min-height:40px;
background:#ed9837;
margin-top:-4px;
display:block;
}
#mainHeader{
min-height:50px;
}
/* menu */
#mainNav ul li{
list-style-type:none;
color:white;
text-decoration:none;
display:inline;
}
#bt_menu{
width:35px;
margin:auto;
padding-top:10px;
}
@media only screen and (max-width:480px) {
body {
width:100%;
}
#mainHeader, #mainNav{
text-align:center;
}
#mainNav ul li{
display:block;
background:grey;
padding:.3em;
}
#mainNav ul li.active{
background:#333333;
}
#mainNav ul li.active a{
background:none;
}
#mainNav ul li:hover{
background:black;
}
}
@media only screen and (min-width:481px) and (max-width:989px) {
body {
width:100%;
}
#mainHeader, #mainNav{
text-align:center;
}
#mainHeader hgroup h2{
display:none;
}
}
@media only screen and (min-width:990px) {
body {
min-width: 990px;
max-width: 1280px;
}
}merci
Modifié par 6l20 (10 Sep 2013 - 09:30)