科技资讯

Document

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

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

本例图片

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

文件夹结构

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

CSS文件夹：

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

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

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

然后就是HTML页面：CSS-menu.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/reset.css" rel="stylesheet" type="text/css" />
	<link href="css/style.css" rel="stylesheet" type="text/css" />
	<link href="css/menu-y.css" rel="stylesheet" type="text/css" id="cssfile" />
	<!--   引入jQuery -->
	<script src="js/jquery-3.5.1.js" type="text/javascript"></script>
	<!--   引入jQuery.cookie库 -->
	<script src="js/jquery.cookie.js" type="text/javascript"></script>
</head>

我们看到 在CSS引用时，我引用了3个css文件：reset.css ，style.css ，menu-y.css 并且，在引用 menu-y.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&#