网站导航菜单带下拉菜单布局模板代码

网站采用简单导航菜单代码，带有下拉的导航菜单div css js布局代码，html网页布局常用横向网站导航菜单，导航可用于企业网站的导航菜单，任意加下拉菜单，懂css就会使用，拷贝代码直接即可使用。兼容性特别好！

网站导航菜单效果(带下拉特效)

下拉菜单栏目名称链接，鼠标悬停时候图标改变同时下面出现下拉层内容，可任意加。

采用了layui框架的JS+DIV CSS，基于此框架的控件插件。

一、在线效果与代码

• 藏青导航
• 产品
• 大数据
• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

• 墨绿导航
• 产品
• 大数据
• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

• 艳蓝导航
• 产品
• 大数据
• 解决方案

  移动模块

  后台模版

  电商平台

• 社区

以上是三种背景颜色样式的带下拉菜单的网站导航菜单效果。

<ul class="layui-nav layui-bg-cyan">
    <li class="layui-nav-item"><a href="">藏青导航</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
        </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-green">
    <li class="layui-nav-item"><a href="">墨绿导航</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
        <dl class="layui-nav-child">
           <dd><a href="">移动模块</a></dd>
           <dd><a href="">后台模版</a></dd>
           <dd><a href="">电商平台</a></dd>
       </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>
<br>
<ul class="layui-nav layui-bg-blue">
    <li class="layui-nav-item"><a href="">艳蓝导航</a></li>
    <li class="layui-nav-item layui-this"><a href="">产品</a></li>
    <li class="layui-nav-item"><a href="">大数据</a></li>
    <li class="layui-nav-item">
        <a href="javascript:;">解决方案</a>
            <dl class="layui-nav-child">
            <dd><a href="">移动模块</a></dd>
            <dd><a href="">后台模版</a></dd>
            <dd><a href="">电商平台</a></dd>
    </dl>
    </li>
    <li class="layui-nav-item"><a href="">社区</a></li>
</ul>

以上是网站导航模板代码HTML代码部分。

背景颜色是通过ul内设置class的值，三种背景颜色分别layui预设的class，layui-bg-cyan（藏青）、layui-bg-green（墨绿）、layui-bg-blue（蓝色），如果设置其他背景颜色，可以对ul取消这三个效果的class值，使用style属性设置其它想要颜色或图片作为背景。

比如：

原来：<ul class="layui-nav layui-bg-cyan">
设置为藏青
现在：<ul class="layui-nav" style="background:#F00">
使用style设置背景颜色为红色，其它颜色或背景图片根据需求设置。

<script src="layui/dist/layui.js" charset="utf-8"></script>
<!-- 注意：如果你直接复制所有代码到本地，上述js路径需要改成你本地的 -->
<script>
layui.use('element', function(){
var element = layui.element; //导航的hover效果、二级菜单等功能，需要依赖element模块
//监听导航点击
element.on('nav(demo)', function(elem){
//console.log(elem)
layer.msg(elem.text());
});
});
</script>

基于layui框架带下拉导航，应用JS特效，所以需要引入JS库，和自定义JS代码，注意引入JS库文件与自定义JS代码位置不能交换，避免效果失效。

二、使用方法

因为基于layui框架，所以需要下载layui文件（包括CSS文件、图标图片素材、JS文件等），拷贝文件后，html引入一个CSS库、JS库即可，不影响原有CSS HTML JS代码兼容。

项目使用步骤：
1、下载layui压缩包；
2、解压后，将文件夹内”layui“文件夹整体拷贝入当前项目；
3、html引入layui.css（注意路径正确）；
4、拷贝需要效果HTML代码（和JS）即可完成使用应用。

三、导航菜单打包下载

免费打包下载此导航菜单（包含完整JS CSS HTML）：