JS+CSS案例：可适应上下布局和左右布局的菜单（含二级菜单）

今天，我给大家分享一个原创的CSS菜单，整个菜单全由CSS写成，仅在切换布局时使用JS。合不合意，先看看效果图。

本例图片

接下来，我来详细给大家分享它的制作方法。

文件夹结构

因为涉及到了样式表切换，所以，你需要借鉴一下我的文件夹结构。

CSS文件夹：

用于清楚浏览器默认设置；
用于写公共布局的样式表，本例主要是写头部和菜单的基本结构。
用于写菜单水平布局的样式表（即页面上下布局）
用于写菜单垂直布局的样式表（即页面左右布局）

我在这里的介绍顺序，也是它们在HTML中的引用顺序。

JS文件夹：jq库文件和jquery.cookie。

然后就是HTML页面：

接下来，我们看一下html页面的头部引用：

HTML头部引用




<head>



	<meta charset="UTF-8">




	<meta name="viewport" content="width=device-width, initial-scale=1.0">




	<title>CSS 菜单（含二级菜单）</title>




	<link href="css/" rel="stylesheet" type="text/css" />




	<link href="css/" rel="stylesheet" type="text/css" />




	<link href="css/" rel="stylesheet" type="text/css" id="cssfile" />




	<!--   引入jQuery -->




	<script src="js/jquery-3.5." type="text/javascript"></script>




	<!--   引入库 -->




	<script src="js/" type="text/javascript"></script>




</head>

我们看到在CSS引用时，我引用了3个css文件：，，并且，在引用时，还在这行代码的最后给它加了一个 id=cssfile 。为什么这样呢？因为我后面要通过js来改变这个ID的引用文件，达到用户前台切换样式表的目的。所以，这个id 一定不能忘了写。

接下来，我们来写：

页面头部




<header>



    <logo>CSS可变换位置的菜单</logo>




    <ul id="skin" class="change_menu">




    	<li id="menu-x" class="menu-x ">横向</li>




    	<li id="menu-y" class="menu-y selected">纵向</li>




    </ul>




    <div class="clearfix"></div>




</header>

在这里，我扔了一个logo标签。然后我会在css里设置它左浮动，并让后面的切换列表跟着它浮动。

这部分的CSS样式表如下：




 




body{



    background: #333;



    box-sizing: border-box;



}




header{



    width: 100%;



    background:#dcdcdc;



    border-bottom:1px solid #999;



    padding: 20px;



    display: block;



    height: auto;



}



logo{



    font-size: 2rem;



    font-weight: 700;



    text-shadow: 1px 1px 1px rgba(255, 255, 255, 0.9); 



    float:left;



    margin-right: 1rem;



}



logo::after{



    position: absolute;



    content:'';



    display: block;



    clear: both;



}




.change_menu{



    margin-top: 5px;



    float:left;



    width: 120px;



    text-align: left;



}




.change_menu li{



    font-size: 0.8rem;



    list-style: square;



    cursor: pointer;



    transition: 0.3s;



    display: block;



}




.change_menu li:hover{



    color: rgb( 19,156,228);



    padding-left: 5px;



    transition: 0.3s;



}




.clearfix{



    width: 100%;



    height: 0px;



    clear:both;



    font-size: 0;



    line-height: 0;



}




.change_menu li.selected{



    color: rgb( 19,156,228);



}

接下来进入正题：

二级菜单的HTML




 



<nav>



		<ul class="main_menu">




			<li class="push_down">首页</li>




			<li class="push_down">笔记



				<ul class="sub_menu">




					<li><a href="###" >JS+CSS+HTML</a></li>




					<li><a href="###" >Python</a></li>




					<li><a href="###" >WordPress</a></li>




					<li><a href="###" >PhotoShop</a></li>




					<li><a href="###" >Icon</a></li>




					<li><a href="###" >UI Design</a></li>




					<li><a href="###" >PHP</a></li>




					<li><a href="###" >SEO</a></li>




				</ul>




			</li>




			<li class="push_down">作品



				<ul class="sub_menu">




					<li><a href="###" >Web Page</a></li>




					<li><a href="###" >Web Development</a></li>




					<li><a href="###" >Code Snippets</a></li>




					<li><a href="###" >ICON Design</a></li>




					<li><a href="###" >User Interface</a></li>




					<li><a href="###" >Picture design</a></li>




					<li><a href="###" >Enterprise VI System</a></li>




				</ul>




			</li>




			<li class="push_down">软件



				<ul class="sub_menu">




					<li><a href="###" >PhotoShop</a></li>




					<li><a href="###" >Screenshots Guest</a></li>




					<li><a href="###" >Easy Desktop</a></li>




				</ul>	



			</li>




			<li class="push_down">团队</li>




			<li class="push_down">订单</li>




		</ul>




	</nav>

这个布局结构非常清晰，大家看一眼就明白了。

接下来就是写它的样式表。

我先写了横向的布局的样式表：

横向布局菜单的CSS样式表




/*  */



 




nav{



    width:100%;



    position: fixed;  



    background:#dcdcdc;



    border-top:1px solid #eee;



}




.main_menu{



    width:100%;



    height:40px;



}




.main_menu>li{



    position: relative;



    float: left;



    text-decoration: none;



    padding: 0.8rem 2rem;



    font-family: "微软雅黑", sans-serif;



    font-size: 1.3rem;



    font-weight: 700;



    user-select: none;



    white-space: nowrap;



    text-align: center;



    height: 60px;



}



 




.sub_menu{



    width: auto;



    display:block;



    position: absolute;



    background: #ececec;



    font-size: 1rem;



    border-radius: 0px 0px 0.5rem 0.5rem;



    padding: 0rem 0rem;



    overflow: hidden;



    left: -30%;



    top:59px;



    transition: 0.3s;



    transform: rotateX(90deg);



    transform-origin : 100% 0 0;



    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2),0px 5px 5px 0px rgba(0, 0, 0, 0.2) inset;



}



 



 



 




.sub_menu li{



    display: block;



}




.sub_menu li a{



    display: block;



    color:#666;



    padding: 0.8rem 2rem;



}




.sub_menu li a:hover{



    color: rgb( 19,156,228);



    background: #fff;



}




.sub_menu li:first-child a:hover{



    box-shadow: 0px 5px 5px 0px rgba(0, 0, 0, 0.2) inset;



}



 




.push_down{



  cursor: pointer;



  border-radius: 10px;



  border:1px solid #dcdcdc;



  height: 60px;



  background-color: #dcdcdc;



  transition: 0.15s;  



  text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.9); 



}




.push_down:hover{ 



  color: rgb( 19,156,228);



}




.push_down li a:active{



  box-shadow:0px 1px 30px rgba(0, 0, 0, 0.3)inset, 2px 2px 2px rgba(0, 0, 0, 0.029)inset,0px 1px 1px rgba(0, 0, 0, 0.06) inset,0px -1px 0px rgba(255, 255, 255, 0.06) inset,5px 5px 6px rgba(0, 0, 0, 0.027) inset,10px 9px 12px rgba(0, 0, 0, 0.07) inset;



  text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.9); 



  transition: 0.15s;



}




.push_down:hover .sub_menu {



    display: block;



    transform:rotateX(0deg);



    transition: 0.15s;



}

接下来，复制这个样式表到新的文件中，并把新的文件命名为，然后，修改了菜单宽度，li的display属性值改为block，然后修改了hover状态下的二级菜单的动画方向和圆角。这样，垂直方向的菜单也就完成了：

垂直布局菜单的CSS样式表




/*  */



 




nav{



    width:150px; /* 这里修改了，控制菜单宽度 */




    height: 100%;



    position: fixed;  



    background:#dcdcdc;



    border-top:1px solid #eee;



}




.main_menu{



    width:100%;



}




.main_menu>li{



    position: relative;



    float: none;



    display: block;  /* 这里修改了，让菜单一个个垂直布局下去而不是浮动 */




    text-decoration: none;



    padding: 0.8rem 2rem;



    font-family: "微软雅黑", sans-serif;



    font-size: 1.3rem;



    font-weight: 700;



    user-select: none;



    white-space: nowrap;



    text-align: center;



    height: 60px;



}



 




.sub_menu{



    width: auto;



    display:block;



    position: absolute;



    background: #ececec;



    font-size: 1rem;



    border-radius:  0rem 0.5rem 0.5rem 0rem; /* 这里修改了，圆角位置 */




    padding: 0rem 0rem;



    overflow: hidden;



    left: 149px;



    top:-30px;



    transition: 0.3s;



    transform: rotateY(90deg);     /* 这里修改了，菜单动画 */




    transform-origin :  0 100% 0;



    box-shadow: 5px 0px 5px 0px rgba(0, 0, 0, 0.2),5px 0px 5px 0px rgba(0, 0, 0, 0.2) inset;  /* 这里修改了，阴影方向 */




}




.sub_menu li{



    display: block;



}




.sub_menu li a{



    display: block;



    color:#666;



    padding: 0.8rem 2rem;



}




.sub_menu li a:hover{



    color: rgb( 19,156,228);



    background: #fff;



    box-shadow: 5px 0px 2px 0px rgba(0, 0, 0, 0.2) inset;   /* 这里修改了，阴影方向 */




}




.push_down{



  cursor: pointer;



  border-radius: 10px;



  border:1px solid #dcdcdc;



  height: 60px;



  background-color: #dcdcdc;



  transition: 0.15s;  



  text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.9); 



}




.push_down:hover{  



  color: rgb( 19,156,228);



}




.push_down li a:active{



  box-shadow:0px 1px 30px rgba(0, 0, 0, 0.3)inset, 2px 2px 2px rgba(0, 0, 0, 0.029)inset,0px 1px 1px rgba(0, 0, 0, 0.06) inset,0px -1px 0px rgba(255, 255, 255, 0.06) inset,5px 5px 6px rgba(0, 0, 0, 0.027) inset,10px 9px 12px rgba(0, 0, 0, 0.07) inset;



  text-shadow: 1px 2px 1px rgba(255, 255, 255, 0.9); 



  transition: 0.15s;



}




.push_down:hover .sub_menu {



    display: block;



    transform:rotateY(0deg);   /* 这里修改了，菜单动画 */




    transition: 0.15s;



}

两个CSS文件都准备好了，接下来就是写JS代码，实现样式表切换：

实现样式表切换的JS

注意，这个写在页面最下面哦。具体切换的实现我就不多介绍了。想了解更多样式表切换实现的，请移步参考我的另一篇文章：JS+CSS案例：JS+CSS 实现漂亮时尚的样式表切换（换肤）功能/mp_blog/creation/editor/140877777




<script type="text/javascript">



    //<![CDATA[




    $(function(){



        var $li =$("#skin li");



        $li.click(function(){



            switchSkin( this.id );



        });



        var cookie_skin = $.cookie( "MyCssSkin");



        if (cookie_skin) {



            switchSkin( cookie_skin );



        }



    });



    function switchSkin(skinName){



        //当前<li>元素选中




        $("#"+skinName).addClass("selected").siblings().removeClass("selected");  //去掉其它同辈<li>元素的选中




            $("#cssfile").attr("href","css/"+ skinName +".css"); //设置不同皮肤




            $.cookie( "MyCssSkin" ,  skinName , { path: '/', expires: 10 });



    }



    //]]>




</script>

然后嘛，这个菜单就完成了！

大功告成！

其实很简单吧？路过的，喜欢的，帮我点个赞呗？！

秒客网