帶子菜單的菜單。個人電腦，平板電腦和手機

這是一個帶有子菜單的菜單代碼，不工作子菜單。菜單代碼，適用於PC和平板電腦，但子菜單不起作用。另外，我想像平板電腦中的acordion這樣的子菜單工作。帶子菜單的菜單。個人電腦，平板電腦和手機

$(document).ready(main); 
 

 
var contador = 1; 
 

 
function main(){ 
 
    $('.menu_bar').click(function(){ 
 
     // $('nav').toggle(); Forma Sencilla de aparecer y desaparecer 
 

 
     if (contador == 1){ 
 
      $('nav').animate({ 
 
       left: '0' 
 
      }); 
 
      contador = 0; 
 
     } else { 
 
      contador = 1; 
 
      $('nav').animate({ 
 
       left: '-100%' 
 
      }); 
 
     }; 
 

 
    }); 
 
};

/* CSS Document */ 
 
@font-face { 
 
    font-family: 'FalconMasters'; 
 
    src:url('../fonts/FalconMasters.eot?-ibh2ms'); 
 
    src:url('../fonts/FalconMasters.eot?#iefix-ibh2ms') format('embedded-opentype'), 
 
     url('../fonts/FalconMasters.woff?-ibh2ms') format('woff'), 
 
     url('../fonts/FalconMasters.ttf?-ibh2ms') format('truetype'), 
 
     url('../fonts/FalconMasters.svg?-ibh2ms#FalconMasters') format('svg'); 
 
    font-weight: normal; 
 
    font-style: normal; 
 
} 
 

 
[class^="icon-"], [class*=" icon-"] { 
 
    font-family: 'FalconMasters'; 
 
    speak: none; 
 
    font-style: normal; 
 
    font-weight: normal; 
 
    font-variant: normal; 
 
    text-transform: none; 
 
    line-height: 1; 
 

 
    /* Better Font Rendering =========== */ 
 
    -webkit-font-smoothing: antialiased; 
 
    -moz-osx-font-smoothing: grayscale; 
 
} 
 

 
.icon-mail:before { 
 
    content: "\e604"; 
 
} 
 
.icon-house:before { 
 
    content: "\e622"; 
 
} 
 
.icon-rocket:before { 
 
    content: "\e650"; 
 
} 
 
.icon-suitcase:before { 
 
    content: "\e652"; 
 
} 
 
.icon-earth:before { 
 
    content: "\e654"; 
 
} 
 
.icon-cross:before { 
 
    content: "\e678"; 
 
} 
 
.icon-list2:before { 
 
    content: "\e696"; 
 
} 
 

 

 

 
* { 
 
margin:0; 
 
padding:0; 
 
} 
 

 
body { 
 
background:#FFFFFA; 
 
} 
 

 
header { 
 
width:100%; 
 
} 
 

 
header nav { 
 
width:100%; 
 
max-width:1000px; 
 
background:#024959; 
 
} 
 

 
.menu_bar { 
 
display:none; 
 
} 
 

 
nav ul { 
 
overflow:hidden; 
 
list-style:none; 
 
} 
 

 
nav ul li { 
 
float:left; 
 
position:relative; 
 
display:inline-block; 
 
} 
 

 
nav ul li a { 
 
color:#fff; 
 
padding:20px; 
 
display:block; 
 
text-decoration:none; 
 
line-height:20px; 
 
position: relative; 
 
-webkit-transition: all .3s ease; 
 
-moz-transition: all .3s ease; 
 
-ms-transition: all .3s ease; 
 
-o-transition: all .3s ease; 
 
transition: all .3s ease; 
 
} 
 

 
nav ul li span { 
 
margin-right:10px; 
 
} 
 

 
nav ul li a:hover { 
 
background:#037E8C; 
 
} 
 

 
section { 
 
padding:20px; 
 
} 
 

 
/*Sub-menu*/ 
 
nav .submenu1{ 
 
    position:relative; 
 
    display: none; 
 
    width: 100%; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 

 
#submenu a:hover .submenu1{ 
 
    display: block; 
 
    background-color:#D90B0F; 
 
} 
 

 
@media screen and (max-width:800px) { 
 
header nav { 
 
    width:80%; 
 
    height:100%; 
 
    left:-100%; 
 
    margin:0; 
 
    position: fixed; 
 
} 
 

 
header nav ul li { 
 
    display:block; 
 
    float:none; 
 
    border-bottom:1px solid rgba(255,255,255, .3); 
 
} 
 

 
.menu_bar { 
 
    display:block; 
 
    width:100%; 
 
    background:#ccc; 
 
} 
 

 
.menu_bar .bt-menu { 
 
    display:block; 
 
    padding:20px; 
 
    background:#024959; 
 
    color:#fff; 
 
    text-decoration:none; 
 
    font-weight: bold; 
 
    font-size:25px; 
 
    -webkit-box-sizing:border-box; 
 
    -moz-box-sizing:border-box; 
 
    box-sizing:border-box; 
 
} 
 

 
.menu_bar span { 
 
    float:right; 
 
    font-size:40px; 
 
} 
 
}

<!doctype html> 
 
<html> 
 
<head> 
 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
 
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/7d96e2500b/UntitledProject7/style.css"> 
 
<link rel="stylesheet" href="assets/css/menuH.css"> 
 

 
<title>index</title> 
 

 
<meta charset="utf-8"> 
 

 
</head> 
 

 
<body> 
 
<header> 
 
    <div class="menu_bar"> 
 
    <a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a> 
 
    </div> 
 

 
    <nav> 
 
    <ul> 
 
    <li><a href="#"><span class="icon-house"></span>Inicio</a></li> 
 
    <li id="submenu"><a href="#"><span class="icon-suitcase"></span>Trabajos</a> 
 
    <ul class="submenu1"> 
 
      <li><a href="#">Item #1</a></li> 
 
      <li><a href="#">Item #2</a></li> 
 
      <li><a href="#">Item #3</a></li> 
 
      <li><a href="#">Item #4</a></li> 
 
      <li><a href="#">Item #5</a></li> 
 
     </ul> 
 
     
 
    </li> 
 
     
 
    <li><a href="#"><span class="icon-rocket"></span>Proyectos</a></li> 
 
    <li><a href="#"><span class="icon-earth"></span>Servicios</a></li> 
 
    <li id="submenu"><a href="#"><span class="icon-mail"></span>Contactos</a></li> 
 
    </ul> 
 
    </nav> 
 
</header> 
 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
 

 
</body> 
 
</html>

#submenu a:hover .submenu1{ 
    display: block; 
    background-color:#D90B0F; 
}

爲什麼呢？

--------------- CSS 3 -------------

/* CSS Document */ 
@font-face { 
    font-family: 'FalconMasters'; 
    src:url('../fonts/FalconMasters.eot?-ibh2ms'); 
    src:url('../fonts/FalconMasters.eot?#iefix-ibh2ms') format('embedded-opentype'), 
     url('../fonts/FalconMasters.woff?-ibh2ms') format('woff'), 
     url('../fonts/FalconMasters.ttf?-ibh2ms') format('truetype'), 
     url('../fonts/FalconMasters.svg?-ibh2ms#FalconMasters') format('svg'); 
    font-weight: normal; 
    font-style: normal; 
} 

[class^="icon-"], [class*=" icon-"] { 
    font-family: 'FalconMasters'; 
    speak: none; 
    font-style: normal; 
    font-weight: normal; 
    font-variant: normal; 
    text-transform: none; 
    line-height: 1; 

    /* Better Font Rendering =========== */ 
    -webkit-font-smoothing: antialiased; 
    -moz-osx-font-smoothing: grayscale; 
} 

.icon-mail:before { 
    content: "\e604"; 
} 
.icon-house:before { 
    content: "\e622"; 
} 
.icon-rocket:before { 
    content: "\e650"; 
} 
.icon-suitcase:before { 
    content: "\e652"; 
} 
.icon-earth:before { 
    content: "\e654"; 
} 
.icon-cross:before { 
    content: "\e678"; 
} 
.icon-list2:before { 
    content: "\e696"; 
} 



* { 
margin:0; 
padding:0; 
} 

body { 
background:#FFFFFA; 
} 

header { 
width:100%; 
} 

header nav { 
width:100%; 
max-width:1000px; 
background:#024959; 
} 

.menu_bar { 
display:none; 
} 

nav ul { 
overflow:hidden; 
list-style:none; 
} 

nav ul li { 
float:left; 
position:relative; 
display:inline-block; 
} 

nav ul li a { 
color:#fff; 
padding:20px; 
display:block; 
text-decoration:none; 
line-height:20px; 
position: relative; 
-webkit-transition: all .3s ease; 
-moz-transition: all .3s ease; 
-ms-transition: all .3s ease; 
-o-transition: all .3s ease; 
transition: all .3s ease; 
} 

nav ul li span { 
margin-right:10px; 
} 

nav ul li a:hover { 
background:#037E8C; 
} 

section { 
padding:20px; 
} 

/*Sub-menu*/ 
nav .submenu1{ 
    position:relative; 
    display: none; 
    width: 100%; 
    margin: 0; 
    padding: 0; 
} 

#submenu a:hover .submenu1{ 
    display: block; 
    background-color:#D90B0F; 
} 

@media screen and (max-width:800px) { 
header nav { 
    width:80%; 
    height:100%; 
    left:-100%; 
    margin:0; 
    position: fixed; 
} 

header nav ul li { 
    display:block; 
    float:none; 
    border-bottom:1px solid rgba(255,255,255, .3); 
} 

.menu_bar { 
    display:block; 
    width:100%; 
    background:#ccc; 
} 

.menu_bar .bt-menu { 
    display:block; 
    padding:20px; 
    background:#024959; 
    color:#fff; 
    text-decoration:none; 
    font-weight: bold; 
    font-size:25px; 
    -webkit-box-sizing:border-box; 
    -moz-box-sizing:border-box; 
    box-sizing:border-box; 
} 

.menu_bar span { 
    float:right; 
    font-size:40px; 
} 
}

--------- ----------- html5 ------------------

<!doctype html> 
<html> 
<head> 
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"> 
<link rel="stylesheet" href="http://i.icomoon.io/public/temp/7d96e2500b/UntitledProject7/style.css"> 
<link rel="stylesheet" href="assets/css/menuH.css"> 

<title>index</title> 

<meta charset="utf-8"> 

</head> 

<body> 
<header> 
    <div class="menu_bar"> 
    <a href="#" class="bt-menu"><span class="icon-list2"></span>Menu</a> 
    </div> 

    <nav> 
    <ul> 
    <li><a href="#"><span class="icon-house"></span>Inicio</a></li> 
    <li id="submenu"><a href="#"><span class="icon-suitcase"></span>Trabajos</a></li> 
     <ul class="submenu1"> 
      <li><a href="#">Item #1</a></li> 
      <li><a href="#">Item #2</a></li> 
      <li><a href="#">Item #3</a></li> 
      <li><a href="#">Item #4</a></li> 
      <li><a href="#">Item #5</a></li> 
     </ul> 
    <li><a href="#"><span class="icon-rocket"></span>Proyectos</a></li> 
    <li><a href="#"><span class="icon-earth"></span>Servicios</a></li> 
    <li id="submenu"><a href="#"><span class="icon-mail"></span>Contactos</a></li> 
    </ul> 
    </nav> 
</header> 
<script src="http://code.jquery.com/jquery-latest.js"></script> 
<script> 
$(document).ready(main); 

var contador = 1; 

function main(){ 
    $('.menu_bar').click(function(){ 
     // $('nav').toggle(); Forma Sencilla de aparecer y desaparecer 

     if (contador == 1){ 
      $('nav').animate({ 
       left: '0' 
      }); 
      contador = 0; 
     } else { 
      contador = 1; 
      $('nav').animate({ 
       left: '-100%' 
      }); 
     }; 

    }); 
}; 
</script> 
</body> 
</html>

謝謝。

來源

2016-06-28 Jorge Enrique

您可以添加一個新類以在菜單中使用「toggleClass」。就像這樣：

.show_menu_bar { 
    left:0; 
}

，並添加過渡到NAV爲動畫：

header nav { 
width:100%; 
max-width:1000px; 
background:#024959; 
transition: all ease .4s; 
position: relative; 
}

我建議你使用「中的」在jQuery的方法。你可以閱讀它是如何工作的here。

要動畫子菜單增加了一類主菜單按鈕，然後使用「上（）」再次

$(document).on('click', '.display_submenu', function() { 
    $(this).next().slideToggle('fast'); 
});

CSS的子菜單：

nav .display_submenu + * { 
    position: absolute !important; 
    top:100%; 
    background: #024959; 
} 
@media screen and (max-width:800px) { 
    nav .display_submenu + * { 
    position: relative !important; 
    top:auto; 
    background: inherit; 
    } 
}

你可以看到這個例子工作here。來自墨西哥的問候

來源

2016-06-29 04:22:17

帶子菜單的菜單。個人電腦，平板電腦和手機

回答

相關問題