html 智能菜单薄荷主题

Posted 2021-05-10

  
<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-mint">
    <li><a href="http://www.smartmenus.org/">Home</a></li>
    <li><a href="http://www.smartmenus.org/about/">About</a>
		<ul>
			<li><a href="http://www.smartmenus.org/about/introduction-to-smartmenus-jquery/">Introduction to SmartMenus jQuery</a></li>
			<li><a href="http://www.smartmenus.org/about/themes/">Demos + themes</a></li>
			<li><a href="http://vadikom.com/about/#vasil-dinkov">The author</a></li>
			<li><a href="http://www.smartmenus.org/about/vadikom/">The company</a>
				<ul>
					<li><a href="http://vadikom.com/about/">About Vadikom</a></li>
					<li><a href="http://vadikom.com/projects/">Projects</a></li>
					<li><a href="http://vadikom.com/services/">Services</a></li>
					<li><a href="http://www.smartmenus.org/about/vadikom/privacy-policy/">Privacy policy</a></li>
				</ul>
			</li>
		</ul>
    </li>
    <li><a href="http://www.smartmenus.org/download/">Download</a></li>
    <li><a href="http://www.smartmenus.org/support/">Support</a>
	     <ul>
	        <li><a href="http://www.smartmenus.org/support/premium-support/">Premium support</a></li>
	        <li><a href="http://www.smartmenus.org/support/forums/">Forums</a></li>
	     </ul>
    </li>
    <li><a href="http://www.smartmenus.org/docs/">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="#">Dummy item</a></li>
        <li><a href="#">more...</a>
          	<ul>            
	            <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>           
          </ul>
        </li>
      </ul>
    </li>
    <li><a href="http://www.smartmenus.org/contact/">Contact</a></li>
  </ul>
</nav>

<!--SASS-->
<style>
.main-nav {
    border-bottom: 2px solid #8db863;
    background: #fff;

    &:after {
        clear: both;
        content: "\00a0";
        display: block;
        height: 0;
        font: 0px/0 serif;
        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: #333;
            font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif;
            font-size: 22px;
            font-weight: normal;
            line-height: 17px;
            text-decoration: none;
        }
    }

    #main-menu {
        clear: both;
        border-bottom: 0;
    }

	@include media-only(tablet, min){
		#main-menu {
            float: right;
            clear: none;
        }
	}


    /* Mobile menu toggle button */

    .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;
        }
    }


    /* hamburger icon */

    .main-menu-btn-icon{
    	position: absolute;
        top: 50%;
        left: 2px;
        height: 2px;
        width: 24px;
        background: #333;
        -webkit-transition: all 0.25s;
        transition: all 0.25s;

    	&:before{
    		position: absolute;
	        top: 50%;
	        left: 2px;
	        height: 2px;
	        width: 24px;
	        background: #333;
	        -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: #333;
	        -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>
	$('#main-menu').smartmenus({
		subMenusSubOffsetX: 6,
		subMenusSubOffsetY: -8
	});

	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();
			}
		});
	}
</script>