首页    技术博客    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

      Python学习笔记：使用pydoc工具查询文档

      本文介绍了在Windows环境下使用pydoc工具的方法，并详细解释了如何通过命令行和浏览器查看Python内置函数的文档。此外，还提供了关于raw_input和open函数的具体用法和功能说明。 ... [详细]
    • css

      Python文本处理与可视化：分词及词云生成

      本文介绍如何使用Python进行文本处理，包括分词和生成词云图。通过整合多个文本文件、去除停用词并生成词云图，展示文本数据的可视化分析方法。 ... [详细]
    • css

      并发编程：深入理解设计原理与优化

      并发编程：深入理解设计原理与优化
      本文探讨了并发编程中的关键设计原则，特别是Java内存模型（JMM）的happens-before规则及其对多线程编程的影响。文章详细介绍了DCL双重检查锁定模式的问题及解决方案，并总结了不同处理器和内存模型之间的关系，旨在为程序员提供更深入的理解和最佳实践。 ... [详细]
    • css

      在CentOS 7上部署Grafana

      本文详细介绍了如何在CentOS 7操作系统上安装和配置Grafana，包括必要的依赖项安装、插件管理以及服务启动等步骤。 ... [详细]
    • css

      解决JAX-WS动态客户端工厂弃用问题并迁移到XFire

      解决JAX-WS动态客户端工厂弃用问题并迁移到XFire
      在处理Java项目中的JAR包冲突时，我们遇到了JaxWsDynamicClientFactory被弃用的问题，并成功将其迁移到org.codehaus.xfire.client。本文详细介绍了这一过程及解决方案。 ... [详细]
    • json

      Git 分布式版本控制系统：远程仓库的深入探讨

      本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例，帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
    • css

      GDI基础介绍之几何绘图

      使用GDI的一些AIP函数我们可以轻易的绘制出简 ... [详细]
    • json

      使用npm脚本同时启动多个监听服务的技巧

      本文介绍了如何利用npm脚本和concurrently工具，实现本地开发环境中多个监听服务的同时启动，包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
    • css

      CUGB图论专题：排水系统中的最大流问题 - EK与Dinic算法解析

      本题探讨如何通过最大流算法解决农场排水系统的设计问题。题目要求计算从水源点到汇合点的最大水流速率，使用经典的EK（Edmonds-Karp）和Dinic算法进行求解。 ... [详细]
    • css

      使用Xshell通过SSH协议远程连接Ubuntu系统

      本文介绍如何通过SSH协议使用Xshell远程连接到Ubuntu系统。为了实现这一目标，需要确保Ubuntu系统已安装并配置好SSH服务器，并保证网络连通性。 ... [详细]
    • css

      落樱3D v0.5：Android平台的美少女格斗游戏

      落樱3D v0.5是一款在Android平台上发布的3D美少女格斗游戏，本次更新带来了多项新功能和优化。 ... [详细]
    • css

      优化局域网SSH连接延迟问题的解决方案

      优化局域网SSH连接延迟问题的解决方案
      本文介绍了解决局域网内SSH连接到服务器时出现长时间等待问题的方法。通过调整配置和优化网络设置，可以显著缩短SSH连接的时间。 ... [详细]
    • css

      2014年度工作总结与自我表彰

      回顾2014年，我经历了多个重要项目和学习阶段，取得了一定的成绩。新的一年即将到来，希望能在更多项目实践中继续成长。 ... [详细]
    • css

      Web前端开发中的HTML与CSS命名规范

      作为一名专业的Web前端工程师，掌握HTML和CSS的命名规范是至关重要的。良好的命名习惯不仅有助于提高代码的可读性和维护性，还能促进团队协作。本文将详细介绍Web前端开发中常用的HTML和CSS命名规范，并提供实用的建议。 ... [详细]
    • css

      HDU 1394：线段树优化求解逆序对问题

      HDU 1394：线段树优化求解逆序对问题
      本文介绍如何使用线段树高效求解排列中的逆序对问题。通过单点增减和区间求和操作，线段树能够快速处理此类问题，并提供了一种替代树状数组的解决方案。 ... [详细]
    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社区 版权所有