包头市政府网站建设情况关键词排名优化教程
今天，我给大家分享一个原创的CSS菜单，整个菜单全由CSS写成，仅在切换布局时使用JS。合不合意，先看看效果图。
本例图片
接下来，我来详细给大家分享它的制作方法。
文件夹结构
因为涉及到了样式表切换，所以，你需要借鉴一下我的文件夹结构。
CSS文件夹：
- reset.css 用于清楚浏览器默认设置；
- style.css 用于写公共布局的样式表，本例主要是写头部和菜单的基本结构。
- menu-x.css 用于写菜单水平布局的样式表（即页面上下布局）
- 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&#