html 智能菜单简单片段
Posted
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了html 智能菜单简单片段相关的知识，希望对你有一定的参考价值。
<nav class="main-nav" role="navigation">
<!-- Mobile menu toggle button (hamburger/x icon) -->
<input id="main-menu-state" type="checkbox" />
<label class="main-menu-btn" for="main-menu-state">
<span class="main-menu-btn-icon"></span> Toggle main menu visibility
</label>
<h2 class="nav-brand"><a href="#">Brand</a></h2>
<!-- Sample menu definition -->
<ul id="main-menu" class="sm sm-simple">
<li><a href="#">Home</a></li>
<li>
<a href="#">About</a>
<ul>
<li><a href="#">Introduction to SmartMenus jQuery</a></li>
<li><a href="#">Demos + themes</a></li>
<li><a href="#">The author</a></li>
<li>
<a href="#">The company</a>
<ul>
<li><a href="#">About Vadikom</a></li>
<li><a href="#">Projects</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Privacy policy</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Download</a></li>
<li>
<a href="#">Support</a>
<ul>
<li><a href="#">Premium support</a></li>
<li><a href="#">Forums</a></li>
</ul>
</li>
<li><a href="#">Docs</a></li>
<li>
<a href="#">Sub test</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="disabled">Disabled menu item</a></li>
<li><a href="#">Dummy item</a></li>
<li>
<a href="#">more...</a>
<ul>
<li><a href="#">A pretty long text to test the default subMenusMaxWidth:20em setting for the sub menus</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li>
<a href="#">more...</a>
<ul>
<li><a href="#">Dummy item</a></li>
<li><a href="#" class="current">A 'current' class item</a></li>
<li><a href="#">Dummy item</a></li>
<li>
<a href="#">more...</a>
<ul>
<li><a href="#">subMenusMinWidth</a></li>
<li><a href="#">10em</a></li>
<li><a href="#">forced.</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
<li><a href="#">Dummy item</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<!--SASS-->
<style>
.main-nav {
border: 1px solid #bbb;
background: #fff;
-webkit-box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0 1px 41px rgba(0, 0, 0, 0.2);
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
&:after {
clear: both;
content: "\00a0";
display: block;
height: 0;
overflow: hidden;
}
@include respond-to(mobile) {
ul {
>li {
float: none;
}
}
}
.nav-brand {
float: left;
margin: 0;
a {
display: block;
padding: 11px 11px 11px 20px;
color: #555;
font-size: 20px;
font-weight: normal;
line-height: 17px;
text-decoration: none;
}
}
#main-menu {
clear: both;
border: 0;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
}
@include media-only(tablet, min) {
#main-menu {
float: right;
clear: none;
}
}
.main-menu-btn {
float: right;
margin: 5px 10px;
position: relative;
display: inline-block;
width: 29px;
height: 29px;
text-indent: 29px;
white-space: nowrap;
overflow: hidden;
cursor: pointer;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
}
@include media-only(tablet, min) {
/* hide the button in desktop view */
.main-menu-btn {
position: absolute;
top: -99999px;
}
}
.main-menu-btn-icon {
position: absolute;
top: 50%;
left: 2px;
height: 2px;
width: 24px;
background: #555;
-webkit-transition: all 0.25s;
transition: all 0.25s;
&:before {
position: absolute;
top: 50%;
left: 2px;
height: 2px;
width: 24px;
background: #555;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
top: -7px;
left: 0;
}
&:after {
position: absolute;
top: 50%;
left: 2px;
height: 2px;
width: 24px;
background: #555;
-webkit-transition: all 0.25s;
transition: all 0.25s;
content: '';
top: 7px;
left: 0;
}
}
#main-menu-state {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
border: 0;
padding: 0;
overflow: hidden;
clip: rect(1px, 1px, 1px, 1px);
&:checked {
&~.main-menu-btn {
.main-menu-btn-icon {
height: 0;
background: transparent;
&:before {
top: 0;
-webkit-transform: rotate(-45deg);
transform: rotate(-45deg);
}
&:after {
top: 0;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
}
}
&~#main-menu {
display: block;
}
}
&:not(:checked) {
&~#main-menu {
display: none;
}
@include media-only(tablet, min) {
&~#main-menu {
display: block;
}
}
}
}
}
</style>
<script>
(function($){
//sm-simple
$('#main-menu').smartmenus({
mainMenuSubOffsetX: -1,
subMenusSubOffsetX: 10,
subMenusSubOffsetY: 0
});
var $mainMenuState = $('#main-menu-state');
if ($mainMenuState.length) {
// animate mobile menu
$mainMenuState.change(function(e) {
var $menu = $('#main-menu');
if (this.checked) {
$menu.hide().slideDown(250, function() {
$menu.css('display', '');
});
} else {
$menu.show().slideUp(250, function() { $menu.css('display', ''); });
}
});
// hide mobile menu beforeunload
$(window).bind('beforeunload unload', function() {
if ($mainMenuState[0].checked) {
$mainMenuState[0].click();
}
});
}
})(jQuery)
</script>以上是关于html 智能菜单简单片段的主要内容，如果未能解决你的问题，请参考以下文章