zoukankan      html  css  js  c++  java
  • 45个jQuery的导航插件和教程

    正如我们所知道的,一个新用户访问一个网站时,决定他们去留的关键是最初的15-20秒种。这是至关重要的,你必须遵循统一的风格来设计您的网站,特别是导航的风格,可能性规则,让用户可以轻松地找到他们想要的内容。这里最大的部分是开发一个菜单,即要直观易用,又要符合你网站的设计风格。

    本文列举了45个 jQuery的导航插件和教程,演示通过jQuery实现一些导航效果,教您如何做一个有创造性和易于使用的导航。

    横向菜单导航插件和教程

    Mega Drop Down Menu w/ CSS & jQuery | Demo

    Jquery Menu2 in 45 jQuery Navigation Plugins and Tutorials

    一个完善的多级导航栏 | Demo
    在本教程中,作者说明了实施完善多层次的导航栏使用HTML,CSS和不显眼的JavaScript的使用jQuery的一些代码行来显示和隐藏小节他的方法。

    Jquery Menu48 in 45 jQuery Navigation Plugins and Tutorials

    使用子画面创建导航菜单 | Demo
    精灵的CSS可以大大提高网站的性能,使用jQuery,我们可以很容易地实现真棒过渡效果。

    Jquery Menu51 in 45 jQuery Navigation Plugins and Tutorials

    标签导航光滑水平滑动
    在本教程中,您将创建一个导航菜单幻灯片水平。它从一个“标签上包含的元素的右边”设置。当点击一个标签幻灯片左侧显示的链接组。再次点击该标签,它滑出。

    Jquery Menu52 in 45 jQuery Navigation Plugins and Tutorials

    droppy - 巢式下拉菜单
    这不是最灵活的插件,但如果你正在寻找一个基本的菜单,它是完美的。
    Jquery Menu1 in 45 jQuery Navigation Plugins and Tutorials

    jQuery Listmenu | Demo
    这jQuery插件允许您方便地转换为长期,难以导航到一个紧凑,易于脱脂首字母为基础的菜单系统,可以快捷进出双向访问数百个项目名单。

    Jquery Menu35 in 45 jQuery Navigation Plugins and Tutorials

    Kwicks for jQuery | Demo

    Jquery Menu3 in 45 jQuery Navigation Plugins and Tutorials

    创建CSS&jQuery的导航菜单
    在本教程中,您将学习如何建设顺利滚动使用jQuery和scrollTo插件影响一个CSS导航菜单。

    Jquery Menu4 in 45 jQuery Navigation Plugins and Tutorials

    苹果风格菜单 | Demo
    在这个深入教程中,您将创建一个苹果风格豹-文本缩进菜单从头开始。首先,您将建立在Photoshop菜单,然后您可以创建所需的HTML和CSS,并最终改善与jQuery它。

    Jquery Menu5 in 45 jQuery Navigation Plugins and Tutorials

    性感下拉菜单瓦特/ jQuery的&的CSS | Demo
    大部分下拉菜单看上去美观,但发展中国家他们适度地降低也很重要。在本教程中,作者展示了如何创建一个性感的下拉菜单中缓慢下降。

    Jquery Menu6 in 45 jQuery Navigation Plugins and Tutorials

    使用jQuery超级下拉菜单 | Demo
    一个大型的建议盘旋下降时,下拉菜单是0.5秒,另有0.5秒钟的延迟当用户移动鼠标了。这些准则,作者演示了如何建立一个大型的下拉可利用的时间延迟菜单。

    Jquery Menu7 in 45 jQuery Navigation Plugins and Tutorials

    JQuery Pager | Demo
    jQuery的传呼机是一个简单的jQuery插件提供分页功能,数据驱动的Web应用程序。

    Jquery Menu39 in 45 jQuery Navigation Plugins and Tutorials

    简单的jQuery下拉 | Demo
    jQuery的菜单不必很复杂,有时你可能想尝试使它们的东西略有不同尽可能地简单。此菜单插件,剥去了以最少的样式代码,但仍通常需要的所有功能。
    Jquery Menu8 in 45 jQuery Navigation Plugins and Tutorials

    平滑动画菜单与jQuery | Demo
    在本教程中,您将学习如何建立一个jQuery菜单和一些可爱的动画和平稳影响它
    Query的缓和插件.

    Jquery Menu9 in 45 jQuery Navigation Plugins and Tutorials

    时尚导航菜单使用jQuery | Demo
    In this menu tutorial there are three main classes that define the looks: normalMenu – for the normal state of the navigation links, hoverMenu – lighter link that slides down on hover, selectedMenu – the active (selected) state.

    Jquery Menu10 in 45 jQuery Navigation Plugins and Tutorials

    易风格jQuery的下拉式菜单 | Demo
    本教程将告诉您如何创建一个简单易风格与悬停鼠标事件和最基本的jQuery的动画使用slideUp和slideDown菜单。

    Jquery Menu11 in 45 jQuery Navigation Plugins and Tutorials

    A Different Top Navigation | Demo
    如果您想使您的网站脱颖而出,您可以考虑不符合“规范”当谈到导航思想。在本教程中,您将正在这样做,通过创建不同的多层次的横向导航系统,它还是不够直观,任何人使用第一次。

    Jquery Menu12 in 45 jQuery Navigation Plugins and Tutorials

    Vimeo-Like Top Navigation | Demo
    If you’ve ever visited the Vimeo 主页您可能已经注意到在下拉菜单当你在搜索框上方盘旋,为你提供不同的搜索选项来缩小搜索范围。您将学习如何重新在本教程这种效果。

    Jquery Menu13 in 45 jQuery Navigation Plugins and Tutorials

    jQuery'd Bread Crumb – jBreadCrumb
    这种可折叠的面包屑jQuery插件已经开发出来,处理深层嵌套的,冗长命名的网页。而不是限制在断绝方面表现出的元素数量,发展商选择顺应了可用性和搜索引擎优化客户端解决方案。它也被证明是好看和好玩的。

    Jquery Menu15 in 45 jQuery Navigation Plugins and Tutorials

    idTabs
    在不平凡-插件多功能idTabs使得添加标签,一个网站非常简单,打开了无限的可能性导航大门。这个插件网页显示您不仅是多么容易idTabs使用和风格,而且还证明了导航选项您将有许多供您使用。

    Jquery Menu16 in 45 jQuery Navigation Plugins and Tutorials

    按键导航 | Demo
    使用jQuery,您的网站的导航不必局限于鼠标的激活。在这个高度,原实验教程您展示了如何让用户浏览您的网站使用的键盘。

    Jquery Menu17 in 45 jQuery Navigation Plugins and Tutorials

    jQuery的滑动菜单 | Demo
    在本教程中,您将学习如何创建一个滑动菜单按钮,类似的效果,您可以看到在行动上PSDtuts超过+网页。当按钮被点击时如果要全面铺开一箱的链接,当单击按钮再次框充分回滚英寸.

    Jquery Menu18 in 45 jQuery Navigation Plugins and Tutorials

    下拉,iPod的细目,并飞出样式
    这种iPod风格的菜单插件提供的任何级别的数量嵌套结构的复杂轻松导航。整个菜单位于内固定大小的区域,当一个节点默认选中的“返回”链接,似乎使导航上一个(父)菜单下面的菜单。

    Jquery Menu19 in 45 jQuery Navigation Plugins and Tutorials

    Flickr菜单设计 | Demo
    这是一个简单的分步教程将告诉您,如何实现一个Flickr风格的冷滑使用jQuery和CSS效果菜单。
    Jquery Menu21 in 45 jQuery Navigation Plugins and Tutorials

    固定淡出菜单 | Demo
    本教程的目的是建立一个固定的导航遵循用户时,向上或向下滚动,只有巧妙地显示了淡出,成为几乎透明本身。当用户在它盘旋,然后在菜单变得不透明了。导航包括一些链接,搜索框,顶部和底部的按钮,让用户浏览到顶部或页面底部。

    Jquery Menu22 in 45 jQuery Navigation Plugins and Tutorials

    mb.menu | Demo
    mb.menu是一个强大的jQuery的组件,可以帮助您建立一个直观的多级树菜单或上下文(右键)菜单。您可以添加您想要多子,如果您的子菜单或菜单不在网页宣布,该组件将得到它通过Ajax,调用模板的菜单中,您需要(数值身份证页面上的“菜单“属性)。

    Jquery Menu23 in 45 jQuery Navigation Plugins and Tutorials

    mcDropdown
    该mcDropdown插件是一个UI控件,让用户选择一个复杂的分层树的选择,允许为鼠标和键盘输入。这个插件的整体效果,有点像在Microsoft Windows“开始”>所有程序“菜单。

    Jquery Menu25 in 45 jQuery Navigation Plugins and Tutorials

    垂直或补充工具栏插件和教程

    简单的jQuery折叠菜单 | Demo
    这是一个非常简单的折叠菜单插件使用jQuery兴建。与小组联系,他们将扩大在子菜单中点击和项目时,不具备分项目的正常联系的项目。菜单将初始化的第一个扩展子菜单。

    Jquery Menu29 in 45 jQuery Navigation Plugins and Tutorials

    标签式结构菜单 | Demo
    本教程将告诉你如何构建自己的节省空间,标签式界面,使用jQuery与slideDown / slideUp影响。

    Jquery Menu24 in 45 jQuery Navigation Plugins and Tutorials

    最新的内容可折叠菜单 | Demo
    在本教程中,您可获得如何构建一个简单的,但引人注目的是CSS,jQuery和花式效果的插件帮助缓解折叠效果。

    Jquery Menu49 in 45 jQuery Navigation Plugins and Tutorials

    水平滚动菜单 | Demo
    本教程教你如何创建一个水平滚动菜单,滚动自动根据您的鼠标轴辎运动和使用jQuery.color plugin to animate the background-color changes.

    Jquery Menu30 in 45 jQuery Navigation Plugins and Tutorials

    Create a Slick Tabbed Content Area using CSS & jQuery | Demo
    在此啧啧您将学习如何建立一个简单的小标签在HTML信息框中,然后它使用纯JavaScript功能,最后你会学到的方法达到同样的效果使用jQuery。

    Jquery Menu50 in 45 jQuery Navigation Plugins and Tutorials

    Slide Out and Drawer Effect | Demo
    苹果网站是这一行动的作用有很大的示范鼠标就'节'和相关的链接标题平息暴露。是什么使这种效果格外清凉的是,抽屉保持一个固定的高度和禁区之间的幻灯片。

    Jquery Menu31 in 45 jQuery Navigation Plugins and Tutorials

    “Outside the Box” Navigation with jQuery | Demo
    This tutorial offers three different ‘out-of-the-box’ OS X dock-style navigation options. There are the, as expected, horizontal and vertical examples, and finally the very cool OS X stack and drop stack.

    Jquery Menu32 in 45 jQuery Navigation Plugins and Tutorials

    Sproing! – Thumbnail Menu | Demo
    Sproing! is a plugin that creates an elastic effect for your navigation that magnifies the menu items when they are hovered over.

    Jquery Menu33 in 45 jQuery Navigation Plugins and Tutorials

    Cool Animated Navigation | Demo
    In this tutorial you’ll learn how to build a really cool animated navigation menu with background position animation using just CSS and jQuery.

    Jquery Menu34 in 45 jQuery Navigation Plugins and Tutorials

    jQuery File Tree | Demo
    jQuery File Tree is a configurable, Ajax file browser plugin for jQuery. You can create a customized, fully-interactive file tree with as little as one line of JavaScript code. Currently, server-side connector scripts are available for PHP, ASP, ASP.NET, JSP, and Lasso. If you’re a developer, you can easily make your own connector to work with your language of choice.

    Jquery Menu36 in 45 jQuery Navigation Plugins and Tutorials

    Creating a Floating HTML Menu Using jQuery and CSS | Demo
    For all of us who deal with long web pages and need to scroll to the top for the menu, this tutorial offers a nice alternative: floating menus that move as you scroll a page. This is built using HTML, CSS and jQuery, and it’s W3C-compliant.

    Jquery Menu37 in 45 jQuery Navigation Plugins and Tutorials

    BDC DrillDown Menu, an iPod-style menu | Demo
    A drill-down menu takes up constant space like an accordion menu but offers the deep hierarchy of a fly-out menu at the same time. Because of this, it not only features a small footprint but is also easier to navigate than a fly-out menu, where more mouse movement and accuracy are required.

    Jquery Menu40 in 45 jQuery Navigation Plugins and Tutorials

    jQuery Context Menu Plugin | Demo
    The goal of this plugin was to streamline the way actions bind to menu items and to use 100% CSS for styling. Keyboard shortcuts have been added for navigation once the menu is opened, and there are five methods that will allow you to control and clean-up your context menu on the fly.

    Jquery Menu41 in 45 jQuery Navigation Plugins and Tutorials

    A ‘Mootools Homepage’ Inspired Navigation | Demo
    This tutorial takes you through the process of developing the menu that had previously been used on the homepage of MooTools, but with jQuery.

    Jquery Menu42 in 45 jQuery Navigation Plugins and Tutorials

    jQuery UI Selectmenu
    界面Selectmenu的jQuery插件的设计重复和扩大选择一个本地的HTML元素的功能,并允许您自定义的外观和感觉,添加图标,并选择内建立层次结构。最棒的是,它的建成与逐步加强,并考虑获得和允许所有本地的鼠标和键盘控制。
    Jquery Menu43 in 45 jQuery Navigation Plugins and Tutorials

    美丽滑出导航 | Demo
    在本教程中,您显示了如何创建一个惊人的滑出式菜单或导航。导航将几乎隐藏 - 项目仅滑出时,对该地区的未来给他们的用户左右。这给出了一个漂亮的效果,使用这种技术可以节省您在网站上一些空间。

    Jquery Menu44 in 45 jQuery Navigation Plugins and Tutorials

    可选水平或垂直导航

    光滑导航菜单
    这个菜单的内容可以是达成无论从网页上直接标记,或外部文件,并通过Ajax的牵强。并jQuery的,可配置,时尚“幻灯片加淡出”由于是过渡期间适用的分菜单揭幕。菜单同时支持横向和纵向(侧栏)的方向。

    Jquery Menu46 in 45 jQuery Navigation Plugins and Tutorials

    Superfish – Suckerfish on 'roids | Demo

    Jquery Menu47 in 45 jQuery Navigation Plugins and Tutorials

  • 相关阅读:
    C语言预处理
    C语言结构体对齐
    C语言共用体、大小端、枚举
    C语言内存分配方法。
    C与指针(结构体指针,函数指针,数组指针,指针数组)定义与使用
    C语言中函数的传入值与传出值
    #define与typedef在重定义类型中的区别
    宏定义在位运算中的运用
    wait函数
    exit()与_exit()区别
  • 原文地址:https://www.cnblogs.com/hannover/p/1849118.html
Copyright © 2011-2022 走看看