2012年最有用的50款 jQuery 插件集錦——《導航篇》

時間 2021-01-02

標籤 javascript css html 前端 java jquery git github web ajax 欄目 JQuery 简体版

原文原文鏈接

　　繼續向你們分享 2012 年發佈的優秀 jQuery 插件，今天帶來的實現導航功能的插件。2012年衆多的 jQuery 新插件發佈出來，能夠說是一個偉大的 jQuery 年份。這個系列的文章向你們分享最具創新的，同時也是最有用的50款 jQuery 插件，這些插件分紅如下類別：網頁佈局插件，導航插件，表格插件，滑塊和轉盤插件，圖表插件，圖片特效插件，視頻插件等等。javascript

您可能感興趣的相關文章

HorizontalNav

這是一款水平方向的 jQuery 導航插件，可以自適應容器的寬度。使用示例：css

　　HTML：

<nav class="horizontal-nav full-width horizontalNav-notprocessed">
    <ul>
        <li><a href="#">Navigation Item</a></li>
        <li><a href="#">Work</a></li>
        <li><a href="#">Blog</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Contact</a></li>
    </ul>
</nav>

　　CSS：

// There is no required CSS for this plugin to work properly
// but here is what is being used to style this demo
.horizontal-nav {
    background: #efefef;
    border-radius: 6px;
}
.horizontal-nav ul {
    background: #128F9A;
    float: left;
    text-align: center;
    border-radius: 6px;
    border: 1px solid #0e7079;
}
.horizontal-nav ul li {
    float: left;
    border-left: 1px solid #0e7079;
}
.horizontal-nav ul li:first-child {
    border-left: 0 none;
}
.horizontal-nav ul li a {
    display: block;
    padding: 10px 20px;
    color: #fff;
    border-top: 1px solid rgba(255,255,255, 0.25);
    border-left: 1px solid rgba(255,255,255, 0.25);
}
.horizontal-nav ul li:first-child a {
    border-left: 0 none;
}
.horizontal-nav ul li a:hover {
    background: #12808a;
}
.horizontal-nav ul li:first-child a {
    border-top-left-radius: 6px;
    border-bottom-left-radius: 6px;
}
.horizontal-nav ul li:last-child a {
    border-top-right-radius: 6px;
    border-bottom-right-radius: 6px;
}

　　JavaScript：

$(document).ready(function() {
    // Call horizontalNav on the navigations wrapping element
    $('.full-width').horizontalNav({});
});

　　插件下載效果演示html

stickyMojo

stickyMojo 是一款輕量的，靈活的側欄固定導航插件，兼容 Firefox, Chrome, Safari, 以及 IE8+。前端

在 IE 更低版本的瀏覽器可以優雅降級處理，使用示例：java

　　HTML：

<div id="wrapper">
  <div id="sidebar">
    <p>sidebar</p>
  </div>
  <div id="main">
    <p>main</p>
  </div>
  <div id="footer">
    Footer
  </div>
</div>

　　CSS：

body {
  margin:0;
  padding:0;
}
#main {
  width:750px;
  height: 750px; /*can be anything, just should make sure it is taller than the sidebar*/
  padding: 25px;
  float: left;
  background-color: #fafafa;
}
#sidebar {
  width: 120px;
  background-color: #ccc;
  min-height: 200px;
  margin: 10px 0 15px 0; /*controls the cutoff of the top and bottom limitations*/
  padding: 15px 10px;
  float: left; /* float right for a right aligned sidebar */
}
#footer {
  width: 940px;
  clear:both;
  background-color: #ccc;
  height: 500px;
  margin-top: 100px;
}
#wrapper {
  width: 940px; /* MUST HAVE WIDTH SET, should be the sidebar width + main width */
  margin-left: auto;
  margin-right: auto;
}

　　JavaScript：

$(document).ready(function(){
    $('#sidebar').stickyMojo({footerID: '#footer', contentID: '#main'});
});

　　插件下載效果演示jquery

ddSlick

ddSlick 是一款很是輕量的插件，可以幫助你實現自定義的下拉導航菜單效果（須要×××），使用示例：git

$('#demoBasic').ddslick({
    data: ddData,
    width: 300,
    p_w_picpathPosition: "left",
    selectText: "Select your favorite social network",
    onSelected: function (data) {
        console.log(data);
    }
});

　　插件下載效果演示github

jQuery Collapse

jQuery Collapse 這個插件爲您提供一個方便和輕量級的解決方案，實現風格各異的摺疊導航功能，使用示例：web

<div id="demo" data-collapse="accordion persist">
  <h2>Fruits</h2>
  <ul>
    <li>Apple</li>
    <li>Pear</li>
    <li>Orange</li>
  </ul>
  <h2>Hint</h2>
  <div>
    <p>One fruit a day keeps the doctor away</p>
  </div>
  <h2>Third</h2>
  <p>Just a paragraph here</p>
</div>

　　data-collapse 屬性可以自動觸發腳本，更詳細教程參考這裏：使用幫助。ajax

　　插件下載效果演示

jQuery Accordion

Akordeon 提供了一種實現手風琴效果的輕量解決方案，可以在有限的空間內展示各類形式的數據，使用示例：

<div class="akordeon">
  <div class="akordeon-item">
    <div class="akordeon-item-head">
        <div class="akordeon-item-head-container">
            <div class="akordeon-heading">
                Header Here
            </div>
        </div>
    </div>
    <div class="akordeon-item-body">
        <div class="akordeon-item-content">
          Contents here
        </div>
    </div>
  </div>

  <div class="akordeon-item-head">
    <div class="akordeon-item-head-container">
        <div class="akordeon-heading">
            Header Here
        </div>
    </div>
  </div>
  <div class="akordeon-item-body">
      <div class="akordeon-item-content">
        Contents here
      </div>
  </div>
</div>

<script>
    $(document).ready(function () {
        $('.akordeon').akordeon();
    });
</script>

　　特別說明：須要×××訪問（⊙﹏⊙b汗）

　　插件下載效果演示

　　最後推薦一款強大的導航菜單在線製做工具》CSS Menu Maker