含二级下拉菜单的CSS3响应式水平导航菜单

技术频道 - html技术

含二级下拉菜单的CSS3响应式水平导航菜单

作者:admin 时间:2023-5-11 15:15:42 浏览:

在前文我介绍了一款CSS3 PC/移动响应式网页水平导航菜单，不过它不包含二级菜单，本文将介绍一款含二级菜单的CSS3响应式水平导航菜单。

效果图

含二级菜单的CSS3响应式水平导航菜单-PC端
PC端导航菜单

含二级菜单的CSS3响应式水平导航菜单-移动端
移动端导航菜单

demo download

示例介绍

CSS3实现的水平导航菜单，该导航菜单是响应式的，它随浏览器窗口的大小而自动变换样式。

PC端

鼠标移到菜单上时，菜单颜色高亮，且出现下横线。
当主菜单有二级菜单时，鼠标悬停时显示二级菜单。
鼠标移开主菜单时，其二级菜单消失。

移动端

右上角有一个菜单开关图标。
点击菜单开关图标，菜单滑出或缩进；
同时，开关图标也切换成三横或叉。

HTML代码

下面是PC端导航菜单的HTML代码结构。

<div class="fr nav">
  <ul class="navbar_nav" data-in="fadeInDown" data-out="fadeOutUp">
    <li class="active">
      <a href="javascript:void(0)">首页</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">网站测速</a>
      <div class="dropdown_menu">
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">网站诊断</a>
      <div class="dropdown_menu">
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
      </div>
    </li>
    <li> <a href="javascript:void(0)">Ping测试</a> </li>
    <li> <a href="javascript:void(0)">路由追踪</a> </li>
    <li> <a href="javascript:void(0)">DNS查询</a> </li>
  </ul>
</div>

下面是移动端导航菜单的HTML代码结构。

<div class="m_nav">
  <div class="top clearfix">
    <img src="static/image/closed.png" alt="" class="closed" />
  </div>
  <div class="logo">
    <img src="static/image/logo.png" alt="" />
  </div>
  <ul class="ul" data-in="fadeInDown" data-out="fadeOutUp">
    <li class="active">
      <a href="javascript:void(0)">首页</a>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">网站测速</a>
      <div class="dropdown_menu">
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
      </div>
    </li>
    <li class="dropdown">
      <a href="javascript:void(0)">网站诊断</a>
      <div class="dropdown_menu">
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
        <a href="#">二级菜单</a>
      </div>
    </li>
    <li> <a href="javascript:void(0)">Ping测试</a> </li>
    <li> <a href="javascript:void(0)">路由追踪</a> </li>
    <li> <a href="javascript:void(0)">DNS查询</a> </li>
  </ul>
</div>

CSS

本示例CSS包含三个文件，有默认样式reset.css、响应式框架bootstrap.css、主要样式head.css，导航菜单的样式定义主要是在head.css里。

<!--默认样式-->
<link rel="stylesheet" href="static/css/reset.css" />

<!--响应式框架-->
<link rel="stylesheet" type="text/css" href="static/css/bootstrap.css">

<!--主要样式-->
<link rel="stylesheet" href="static/css/head.css" />

JavaScript

本示例用到jQuery编程，主要是用来实现菜单鼠标动作事件。实现方法请看代码注释。

$(function()
{
  //超过一定高度导航添加类名
  var nav = $("header"); //得到导航对象  
  var win = $(window); //得到窗口对象  
  var sc = $(document); //得到document文档对象。  
  win.scroll(function()
    {
      if (sc.scrollTop() >= 100)
      {
        nav.addClass("on");
      }
      else
      {
        nav.removeClass("on");
      }
    })
    //移动端展开nav
  $('#navToggle').on('click', function()
    {
      $('.m_nav').addClass('open');
    })
    //关闭nav
  $('.m_nav .top .closed').on('click', function()
    {
      $('.m_nav').removeClass('open');
    })
    //二级导航  移动端
  $(".m_nav .ul li").click(function()
  {
    $(this).children("div.dropdown_menu").slideToggle('slow')
    $(this).siblings('li').children('.dropdown_menu').slideUp('slow');
  });
})