当前位置: 开发笔记 > 前端 > 正文

【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.

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.});

html
css

推荐阅读

html
Vue 2 中解决页面刷新和按钮跳转导致导航栏样式失效的问题

本文介绍了如何通过配置路由的 meta 字段，确保 Vue 2 项目中的导航栏在页面刷新或内部按钮跳转时，始终保持正确的 active 样式。具体实现方法包括设置路由的 meta 属性，并在 HTML 模板中动态绑定类名。 ... [详细]

蜡笔小新 2024-12-28 13:45:20
html
Linux 系统启动故障排除指南：MBR 和 GRUB 问题

本文详细介绍了 Linux 系统启动过程中常见的 MBR 扇区和 GRUB 引导程序故障及其解决方案，涵盖从备份、模拟故障到恢复的具体步骤。 ... [详细]

蜡笔小新 2024-12-27 20:40:29
html
通过类型和标签选择元素

本文介绍了如何使用jQuery根据元素的类型（如复选框）和标签名（如段落）来获取DOM对象。这有助于更高效地操作网页中的特定元素。 ... [详细]

蜡笔小新 2024-12-27 19:44:14
html
导航栏样式练习：项目实例解析

本文详细介绍了如何创建一个具有动态效果的导航栏，包括HTML、CSS和JavaScript代码的实现，并附有详细的说明和效果图。 ... [详细]

蜡笔小新 2024-12-27 19:42:28
html
新浪笔试题

1:有如下一段程序：packagea.b.c;publicclassTest{privatestaticinti0;publicintgetNext(){return ... [详细]

蜡笔小新 2024-12-27 19:32:17
html
深入理解Tornado模板系统

本文详细介绍了Tornado框架中模板系统的使用方法。Tornado自带的轻量级、高效且灵活的模板语言位于tornado.template模块，支持嵌入Python代码片段，帮助开发者快速构建动态网页。 ... [详细]

蜡笔小新 2024-12-27 19:22:16
html
深入理解Cookie与Session会话管理

本文详细介绍了如何通过HTTP响应和请求处理浏览器的Cookie信息，以及如何创建、设置和管理Cookie。同时探讨了会话跟踪技术中的Session机制，解释其原理及应用场景。 ... [详细]

蜡笔小新 2024-12-27 18:20:43
html
Xcode 中多行代码缩进技巧

本文介绍如何在 Xcode 中使用快捷键和菜单命令对多行代码进行缩进，包括右缩进和左缩进的具体操作方法。 ... [详细]

蜡笔小新 2024-12-27 17:52:34
html
Python爬虫实战：豆瓣电影Top250数据抓取

本文详细介绍了如何使用Python编写爬虫程序，从豆瓣电影Top250页面抓取电影信息。文章涵盖了从基础的网页请求到处理反爬虫机制，再到多页数据抓取的全过程，并提供了完整的代码示例。 ... [详细]

蜡笔小新 2024-12-27 16:55:07
html
Linux 自动化安装脚本详解

本文介绍了一款用于自动化部署 Linux 服务的 Bash 脚本。该脚本不仅涵盖了基本的文件复制和目录创建，还处理了系统服务的配置和启动，确保在多种 Linux 发行版上都能顺利运行。 ... [详细]

蜡笔小新 2024-12-27 16:33:32
jquery
分页插件3指定到某一页

前言--页数多了以后需要指定到某一页（只做了功能，样式没有细调）html ... [详细]

蜡笔小新 2024-12-27 15:19:01
html
深入理解CSS盒模型与box-sizing属性

本文详细介绍了W3C标准盒模型和IE传统盒模型的区别，探讨了CSS3中box-sizing属性的使用方法及其在布局中的重要性。通过实例分析，帮助读者更好地理解和应用这一关键概念。 ... [详细]

蜡笔小新 2024-12-27 15:01:09
html
在Linux系统中配置并启动ActiveMQ

本文详细介绍了如何在Linux环境中安装和配置ActiveMQ，包括端口开放及防火墙设置。通过本文，您可以掌握完整的ActiveMQ部署流程，确保其在网络环境中正常运行。 ... [详细]

蜡笔小新 2024-12-27 14:38:54
html
如何在WPS Office for Mac中调整Word文档的文字排列方向

本文将详细介绍如何使用最新版WPS Office for Mac调整Word文档中的文字排列方向。通过这些步骤，用户可以轻松更改文本的水平或垂直排列方式，以满足不同的排版需求。 ... [详细]

蜡笔小新 2024-12-27 12:34:14
html
存储器层次结构、随机访问存储器与数据存取机制

理解存储器的层次结构有助于程序员优化程序性能，通过合理安排数据在不同层级的存储位置，提升CPU的数据访问速度。本文详细探讨了静态随机访问存储器（SRAM）和动态随机访问存储器（DRAM）的工作原理及其应用场景，并介绍了存储器模块中的数据存取过程及局部性原理。 ... [详细]

蜡笔小新 2024-12-27 12:06:47

莫乂乂_465

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章