首页    技术博客    PHP教程    数据库技术    前端开发   HTML5    Nginx    php论坛
新用户注册 | 会员登录
加入会员，解锁专属内容
取消
热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

【jQuery导航】SexyDropDownMenu下拉菜单导航

作者：莫乂乂_465 | 来源：互联网 | 2013-08-12 09:47
美国洛杉矶人SohTanaka于2009年制作的基于jQuery很给力的下拉菜单导航SexyDropDownMenu，以灰为主色调，附之以黑色画龙点睛，给子任感觉很大气，不俗套。

代码

1、导入html代码

根据实际情况调整。

view sourceprint
01.
02.    
  • Home
    • 03.    
    • 04.        Tutorials
    05.        
    06.            
  • Sub Nav Link
    • 07.            
  • Sub Nav Link
    • 08.            
  • Sub Nav Link
    • 09.            
  • Sub Nav Link
    • 10.            
  • Sub Nav Link
    • 11.        
    12.    
    13.    
    • 14.        Resources
    15.        
    16.            
  • Sub Nav Link
    • 17.            
  • Sub Nav Link
    • 18.            
  • Sub Nav Link
    • 19.            
  • Sub Nav Link
    • 20.            
  • Sub Nav Link
    • 21.        
    22.    
    23.    
  • About Us
    • 24.    
  • Advertise
    • 25.    
  • Submit
    • 26.    
  • Contact Us
    • 27.

    2、导入CSS代码

    根据实际情况调整,也可以单独作为外部css引用。

    view sourceprint
    01.ul.topnav {
    02.    list-style: none;
    03.    padding: 0 20px;    
    04.    margin: 0;
    05.    float: left;
    06.    width: 620px;
    07.    background: #222;
    08.    font-size: 1.2em;
    09.    background: url(topnav_bg.gif) repeat-x;
    10.}
    11.ul.topnav li {
    12.    float: left;
    13.    margin: 0;    
    14.    padding: 0 15px 0 0;
    15.    position: relative; /*--Declare X and Y axis base for sub navigation--*/
    16.}
    17.ul.topnav li a{
    18.    padding: 10px 5px;
    19.    color: #fff;
    20.    display: block;
    21.    text-decoration: none;
    22.    float: left;
    23.}
    24.ul.topnav li a:hover{
    25.    background: url(topnav_hover.gif) no-repeat center top;
    26.}
    27.ul.topnav li span { /*--Drop down trigger styles--*/
    28.    width: 17px;
    29.    height: 35px;
    30.    float: left;
    31.    background: url(subnav_btn.gif) no-repeat center top;
    32.}
    33.ul.topnav li span.subhover {background-position: center bottom; cursor: pointer;} /*--Hover effect for trigger--*/
    34.ul.topnav li ul.subnav {
    35.    list-style: none;
    36.    position: absolute; /*--Important - Keeps subnav from affecting main navigation flow--*/
    37.    left: 0; top: 35px;
    38.    background: #333;
    39.    margin: 0; padding: 0;
    40.    display: none;
    41.    float: left;
    42.    width: 170px;
    43.    border: 1px solid #111;
    44.}
    45.ul.topnav li ul.subnav li{
    46.    margin: 0; padding: 0;
    47.    border-top: 1px solid #252525; /*--Create bevel effect--*/
    48.    border-bottom: 1px solid #444; /*--Create bevel effect--*/
    49.    clear: both;
    50.    width: 170px;
    51.}
    52.html ul.topnav li ul.subnav li a {
    53.    float: left;
    54.    width: 145px;
    55.    background: #333 url(dropdown_linkbg.gif) no-repeat 10px center;
    56.    padding-left: 20px;
    57.}
    58.html ul.topnav li ul.subnav li a:hover { /*--Hover effect for subnav links--*/
    59.    background: #222 url(dropdown_linkbg.gif) no-repeat 10px center; 
    60.}

    3、导入JS代码

    亦可作为外部js单独引用。

    view sourceprint
    01.$(document).ready(function(){
    02.  
    03.    $("ul.subnav").parent().append("");//Only shows drop down trigger when js is enabled (Adds empty span tag after ul.subnav*)
    04.  
    05.    $("ul.topnav li span").click(function() {//When trigger is clicked...
    06.  
    07.        //Following events are applied to the subnav itself (moving subnav up and down)
    08.        $(this).parent().find("ul.subnav").slideDown('fast').show();//Drop down the subnav on click
    09.  
    10.        $(this).parent().hover(function() {
    11.        },function(){    
    12.            $(this).parent().find("ul.subnav").slideUp('slow');//When the mouse hovers out of the subnav, move it back up
    13.        });
    14.  
    15.        //Following events are applied to the trigger (Hover events for the trigger)
    16.        }).hover(function() { 
    17.            $(this).addClass("subhover");//On hover over, add class "subhover"
    18.        },function(){    //On Hover Out
    19.            $(this).removeClass("subhover");//On hover out, remove class "subhover"
    20.    });
    21.  
    22.});

    推荐阅读
    • css

      Java实战之电影在线观看系统的实现

      Java实战之电影在线观看系统的实现
      本文介绍了Java实战之电影在线观看系统的实现过程。首先对项目进行了简述，然后展示了系统的效果图。接着介绍了系统的核心代码，包括后台用户管理控制器、电影管理控制器和前台电影控制器。最后对项目的环境配置和使用的技术进行了说明，包括JSP、Spring、SpringMVC、MyBatis、html、css、JavaScript、JQuery、Ajax、layui和maven等。 ... [详细]
    • css

      Java实现大数乘法（分治算法）

      本文介绍了使用Java实现大数乘法的分治算法，包括输入数据的处理、普通大数乘法的结果和Karatsuba大数乘法的结果。通过改变long类型可以适应不同范围的大数乘法计算。 ... [详细]
    • css

      Webpack5内置处理图片资源的配置方法

      Webpack5内置处理图片资源的配置方法
      本文介绍了在Webpack5中处理图片资源的配置方法。在Webpack4中，我们需要使用file-loader和url-loader来处理图片资源，但是在Webpack5中，这两个Loader的功能已经被内置到Webpack中，我们只需要简单配置即可实现图片资源的处理。本文还介绍了一些常用的配置方法，如匹配不同类型的图片文件、设置输出路径等。通过本文的学习，读者可以快速掌握Webpack5处理图片资源的方法。 ... [详细]
    • css

      HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法

      HDU 2372 El Dorado（DP）的最长上升子序列长度求解方法
      本文介绍了解决HDU 2372 El Dorado问题的一种动态规划方法，通过循环k的方式求解最长上升子序列的长度。具体实现过程包括初始化dp数组、读取数列、计算最长上升子序列长度等步骤。 ... [详细]
    • hover

      CSS3选择器的使用方法详解，提高Web开发效率和精准度

      CSS3选择器的使用方法详解，提高Web开发效率和精准度
      本文详细介绍了CSS3新增的选择器方法，包括属性选择器的使用。通过CSS3选择器，可以提高Web开发的效率和精准度，使得查找元素更加方便和快捷。同时，本文还对属性选择器的各种用法进行了详细解释，并给出了相应的代码示例。通过学习本文，读者可以更好地掌握CSS3选择器的使用方法，提升自己的Web开发能力。 ... [详细]
    • css

      Alink回归预测的不完善问题及期待

      本文讨论了Alink回归预测的不完善问题，指出目前主要针对Python做案例，对其他语言支持不足。同时介绍了pom.xml文件的基本结构和使用方法，以及Maven的相关知识。最后，对Alink回归预测的未来发展提出了期待。 ... [详细]
    • css

      求解hdu 1003 java题目的动态规划优化方法

      本文讨论了如何优化解决hdu 1003 java题目的动态规划方法，通过分析加法规则和最大和的性质，提出了一种优化的思路。具体方法是，当从1加到n为负时，即sum(1,n)sum(n,s)，可以继续加法计算。同时，还考虑了两种特殊情况：都是负数的情况和有0的情况。最后，通过使用Scanner类来获取输入数据。 ... [详细]
    • css

      C#之数据集：DataSet对象的使用及相关方法详解

      本文介绍了C#中数据集DataSet对象的使用及相关方法详解，包括DataSet对象的概述、与数据关系对象的互联、Rows集合和Columns集合的组成，以及DataSet对象常用的方法之一——Merge方法的使用。通过本文的阅读，读者可以了解到DataSet对象在C#中的重要性和使用方法。 ... [详细]
    • css

      OC学习笔记之@property和@synthesize

      本文介绍了OC学习笔记中的@property和@synthesize，包括属性的定义和合成的使用方法。通过示例代码详细讲解了@property和@synthesize的作用和用法。 ... [详细]
    • css

      Hibernate基础映射

      在说Hibernate映射前，我们先来了解下对象关系映射ORM。ORM的实现思想就是将关系数据库中表的数据映射成对象，以对象的形式展现。这样开发人员就可以把对数据库的操作转化为对 ... [详细]
    • css

      SpringBoot集成前端模版（thymeleaf）的配置步骤

      本文介绍了在SpringBoot中集成thymeleaf前端模版的配置步骤，包括在application.properties配置文件中添加thymeleaf的配置信息，引入thymeleaf的jar包，以及创建PageController并添加index方法。 ... [详细]
    • css

      知识图谱——机器大脑中的知识库

      知识图谱——机器大脑中的知识库
      本文介绍了知识图谱在机器大脑中的应用，以及搜索引擎在知识图谱方面的发展。以谷歌知识图谱为例，说明了知识图谱的智能化特点。通过搜索引擎用户可以获取更加智能化的答案，如搜索关键词"Marie Curie"，会得到居里夫人的详细信息以及与之相关的历史人物。知识图谱的出现引起了搜索引擎行业的变革，不仅美国的微软必应，中国的百度、搜狗等搜索引擎公司也纷纷推出了自己的知识图谱。 ... [详细]
    • css

      测试人的性格，点火让他着急，考验婚姻问题的善意玩人

      本文讲述了作者通过点火测试男友的性格和承受能力，以考验婚姻问题。作者故意不安慰男友并再次点火，观察他的反应。这个行为是善意的玩人，旨在了解男友的性格和避免婚姻问题。 ... [详细]
    • css

      Linux进程控制块PCBtask_struct结构体结构及作用详解

      本文详细介绍了Linux中进程控制块PCBtask_struct结构体的结构和作用，包括进程状态、进程号、待处理信号、进程地址空间、调度标志、锁深度、基本时间片、调度策略以及内存管理信息等方面的内容。阅读本文可以更加深入地了解Linux进程管理的原理和机制。 ... [详细]
    • firefox

      Voicewo在线语音识别转换jQuery插件的特点和示例

      Voicewo在线语音识别转换jQuery插件的特点和示例
      本文介绍了一款名为Voicewo的在线语音识别转换jQuery插件，该插件具有快速、架构、风格、扩展和兼容等特点，适合在互联网应用中使用。同时还提供了一个快速示例供开发人员参考。 ... [详细]
    author-avatar
    莫乂乂_465
    这个家伙很懒，什么也没留下！
    Tags | 热门标签
    RankList | 热门文章
    PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
    Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有