jquery实现垂直和水平菜单导航栏

本文实例为大家分享了jquery菜单导航栏的实现代码,供大家参考,具体内容如下

1. HTML代码

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <title>竖直导航菜单</title>
    <link href="css/Vmenu.css" rel="stylesheet" />
    <script src="js/jquery-2.1.4.min.js"></script>
    <script>
      $(function(){
        //垂直导航栏,点击下拉子菜单
        $(".main>a").click(function(){
          $(this).next().slideToggle(500)
          .parent().siblings().find(".child").slideUp(500);
        })

        //水平导航栏,鼠标经过下拉导航栏
        $(".hmain").hover(function(){
          $(this).find(".child").slideToggle(500)
            .parent().siblings().find(".child").slideUp();
        })
      })
    </script>
  </head>
  <body>
    <!--垂直导航栏-->
    <ul class="content">
      <li class="main"><a href="#">菜单 1</a>
        <ul class="child">
          <li>菜单1.1</li>
          <li>菜单1.2</li>
          <li>菜单1.3</li>
        </ul>
      </li>
      <li class="main"><a href="#">菜单 2</a>
        <ul class="child">
          <li>菜单2.1</li>
          <li>菜单2.2</li>
          <li>菜单2.3</li>
          <li>菜单2.4</li>
        </ul>
      </li>
      <li class="main"><a href="#">菜单 3</a>
        <ul class="child">
          <li>菜单3.1</li>
          <li>菜单3.2</li>
          <li>菜单3.3</li>
        </ul>
      </li>
      <li class="main"><a href="#">菜单 4</a>
        <ul class="child">
          <li>菜单4.1</li>
          <li>菜单4.3</li>
        </ul>
      </li>
      <li class="main"><a href="#">菜单 5</a>
        <ul class="child">
          <li>菜单5.1</li>
          <li>菜单5.2</li>
        </ul>
      </li>
    </ul>

    <!--水平导航栏-->
    <ul class="content">
      <li class="hmain"><a href="#">菜单 1</a>
        <ul class="child">
          <li>菜单1.1</li>
          <li>菜单1.2</li>
          <li>菜单1.3</li>
        </ul>
      </li>
      <li class="hmain"><a href="#">菜单 2</a>
        <ul class="child">
          <li>菜单2.1</li>
          <li>菜单2.2</li>
          <li>菜单2.3</li>
          <li>菜单2.4</li>
        </ul>
      </li>
      <li class="hmain"><a href="#">菜单 3</a>
        <ul class="child">
          <li>菜单3.1</li>
          <li>菜单3.2</li>
          <li>菜单3.3</li>
        </ul>
      </li>
      <li class="hmain"><a href="#">菜单 4</a>
        <ul class="child">
          <li>菜单4.1</li>
          <li>菜单4.3</li>
        </ul>
      </li>
      <li class="hmain"><a href="#">菜单 5</a>
        <ul class="child">
          <li>菜单5.1</li>
          <li>菜单5.2</li>
        </ul>
      </li>
    </ul>
  </body>
</html>

2. CSS代码

*{
  margin: 0px;
  padding: 0px;
}
.content{
  margin: 40px 100px;
  float: left;
}
ul ,li{
  list-style: none;

}
.main,.hmain{
  width: 150px;
  background: #222;
  font-size: 16px;
  text-align: center;
  cursor: pointer;
  line-height: 40px;
  color: white;
}
.main>a,.hmain>a{
  text-decoration: none;
  color: white;
  display: inline-block;
  width: 150px;
  min-height: 40px;
}
.main:hover,.hmain:hover{
  background: black;
}
.child{
  background: #444;
  display:none;
}
.child li:hover{
  background: #333333;
}

/*垂直导航栏左浮动*/
.hmain{
  float: left;
}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

时间: 2016-08-11

简单的jquery左侧导航栏和页面选中效果

这里是要实现导航的左侧并选中的,此功能需引用jquery 左侧导航: <div class="box"> <ul class="menu"> <li class="level1"> <a href="#none" rel="external nofollow" rel="external nofollow" rel="external

JQuery Mobile实现导航栏和页脚

导航栏由一组水平排列的链接构成,通常位于页眉或页脚内部. 默认地,导航栏中的链接会自动转换为按钮(无需 data-role="button"). 导航栏部分的代码一般放置在data-role为header的div的内. <div data-role="header"> <a href="#" data-role="button" data-icon="home">首页</a&g

jQuery Mobile 导航栏代码

导航栏是由一组水平排列的链接组成,通常包含在头部或尾部内. 默认情况下,导航栏中的链接将自动变成按钮(不需要 data-role="button"). 使用 data-role="navbar" 属性来定义导航栏: 复制代码 代码如下: <div data-role="header"><div data-role="navbar"><ul><li><a href="

jQuery点击导航栏选中更换样式的实现代码

废话不多说了,直接给大家贴代码了,具体代码如下所示: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <tit

jquery+css实现侧边导航栏效果

最近做项目的时候,突然想用一个侧边导航栏,网上找了几个插件,有的太丑而且不太符合我的预期.与其修改别人的代码,不如自己来写一个了.废话不多说先上图,感兴趣的请继续看下去. 1.效果图 当有顶部导航栏的时候侧边导航栏会消失. 响应式方面,同样的顶部导航栏消失后右下角的图标才出现.点击出现导航,选中后消失: 这里是个demo ,没有做平滑滚动,需要的可以自己加上. 大体就介绍这么多吧,下面上代码. 2.css代码 这里是css代码,详情请看注释 <style> /*重置一些样式*/ *, *::a

用jquery的方法制作一个简单的导航栏

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>学习导航栏的制作</title> <script src="http://code.jquery.com/jquery-1.10.2.js"></script> <script> $(document).ready(function() {

JQuery 浮动导航栏实现代码

复制代码 代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv=&q

jquery实现鼠标点击后展开列表内容的导航栏效果

本文实例讲述了jquery实现鼠标点击后展开列表内容的导航栏效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery实现的导航栏,鼠标点击后展开隐藏的列表内容,用来制作一个目录是最合适不过的选择.本例是锋利的jQeury中的一个实例,这是最终的优化版本,兼容性还示曾测试,在火狐的表现尚不知情,有兴趣的朋友可测试或修正. 运行效果截图如下: 在线演示地址如下: http://demo.jb51.net/js/2015/jquery-mouse-click-show-table-nav-co

超炫的jquery仿flash导航栏特效

FLASH导航现在基本上已经是过时了,但是我们可以用jQuery来实现flash效果,非常的不错. 演示地址:http://demo.jb51.net/js/2014/jqeryfangflashdh/demo.html 复制代码 代码如下: <html>  <head>      <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">      <

Jquery给当前页或者跳转后页面的导航栏添加选中后样式的实例

解决方法有两种:一种是直接给当前页面添加特殊样式,当网页刷新或者跳转到下一页后,样式消失:另一种情况是即使刷新页面后样式仍然有效. 直接上代码: 第一种情况: <script type="text/javascript" src="templets/js/jquery.js"></script> <script type="text/javascript"> $(document).ready(function

jquery 仿锚点跳转到页面指定位置的实例

js 仿锚点跳转到页面指定位置,用的是 offset() 方法 $(document).ready(function(){ var target_top = $("#qa5").offset().top; //$("html,body").animate({scrollTop: target_top}, 1000); //带滑动效果的跳转 $("html,body").scrollTop(target_top); }); jQuery: offs

ionic进入多级目录后隐藏底部导航栏(tabs)的完美解决方案

在有tabs的项目里,进入子层级时,底部导航还一直存在,本人是要让他只在首页几个界面存在,其他的隐藏,在这里用到了angularjs的指令,要完成这个步骤分为三步: 在标签ion-tabs中添加:ng-class="{'tabs-item-hide': $root.hideTabs}",源码如下 <ion-tabs class="tabs-icon-top" ng-class="{'tabs-item-hide': $root.hideTabs}&q

iOS界面跳转时导航栏和tabBar的隐藏与显示功能

一.当A页面要push到B页面,需要将B页面的导航栏隐藏时,我们只需要在A页面中重写以下两个方法: override func viewWillAppear(animated: Bool) { super.viewWillAppear(animated) self.navigationController?.setNavigationBarHidden(true, animated: true) } override func viewWillDisappear(animated: Bool)

小程序自定义单页面、全局导航栏的实现代码

需求 产品说小程序返回到首页不太方便,想添加返回首页按钮,UI说导航栏能不能设置背景图片,因为那样设计挺好看的. 需求分析并制定方案 这产品和UI都提需求了,咱也不能反驳哈,所以开始调研,分析可行性方案:1.可以添加悬浮按钮.2.自定义导航栏. 添加悬浮按钮,是看起来是比较简单哈,但是感觉不太优雅,会占据页面的空间,体验也不太好.所以想了下第二种方案,自定义导航栏既可以实现产品的需求还可以满足UI的设计美感,在顶部空白处加上返回首页的按钮,这样和返回按钮还对称(最终如图所示,顶部导航栏是个背景图

详解springmvc控制登录用户session失效后跳转登录页面

springmvc控制登录用户session失效后跳转登录页面,废话不多少了,具体如下: 第一步,配置 web.xml <session-config> <session-timeout>15</session-timeout> </session-config> 第二步,配置spring-mvc.xml <!-- Session失效拦截 --> <mvc:interceptors> <!-- 定义拦截器 --> <

登录超时给出提示跳到登录页面(ajax、导入、导出)

一.一般页面登录超时验证,可以用过滤器filter,如下: package com.lg.filter; import java.io.IOException; import javax.servlet.Filter; import javax.servlet.FilterChain; import javax.servlet.FilterConfig; import javax.servlet.ServletException; import javax.servlet.ServletRequ

thinkPHP5(TP5)实现改写跳转提示页面的方法

本文实例讲述了thinkPHP5(TP5)实现改写跳转提示页面的方法.分享给大家供大家参考,具体如下: 大家都知道Tp框架一直以来的执行成功和失败的页面都不是特别的好看,不过这样也给了开发者一个不错的选择我们可以根据自己的喜好去改写这个跳转提示的页面 我使用的是Tp5框架,Tp5的跳转提示页面的改写和Tp3的有异曲同工之妙,首先还是先看一下Tp框架中自带的跳转提示页面的代码吧,我直接贴上了: {__NOLAYOUT__}<!DOCTYPE html PUBLIC "-//W3C//DTD

使用element-ui的el-menu导航选中后刷新页面保持当前选中状态

具体代码如下所示: <el-menu :default-active='$route.path' :router='true' :unique-opened='true' :default-openeds="defaultOpeneds" background-color="#bd1e22" text-color="#fff" active-text-color="#ffd04b"> //router当导航激活时允