利用jquery實現多樣式下拉菜單



17 67 23



特效描述:利用jquery實現 多樣式 下拉菜單,利用jquery實現多樣式下拉菜單

代碼結構

1. 引入CSS

<link href='http://fonts.googleapis.com/css?family=Francois+One' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="./css/main.css" />
<link rel="stylesheet" type="text/css" href="./stickybar/stickymenu.blue.css" />

2. 引入JS

<script language="javascript" type="text/javascript" src="./js/jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="./stickybar/jquery.stickymenu.js"></script>

3. HTML代碼

    <div id="content">
<!--DEMO start-->
<!-- HERE STARTS HEADER -->
<div id="header">
	<div class="wrapper">
    	<div class="light">
            <h1>Sticky MenuBar</h1>
        </div>
    </div>
</div>
<!-- HERE ENDS HEADERS -->
<div id="optionbar">
	<div class="wrapper">
		<!-- HERE STARTS THE MENU -->
        <ul id="smenubar"> 
        	<li><a href="#">Login</a>
            	<ul>
                	<li>
                        <div class="login_block">
                        	<label>Username</label><input type="text" /><br />
                            <label>Password</label><input type="password" /><br />
                            <label></label><input type="checkbox" />Remember me<br />
                            <label></label><input type="button" class="button" value="Login" />
                        </div>
                    </li>
                    <li class="regular_menu center">
                    	<a href="#">Don't have an account? Register!</a>
                    </li>
                </ul>
            </li>
            <li class="regular_menu"><a href="#">Styles</a>
            	<ul class="regular_menu">
                	<li><a href="./index.html">Blue</a></li>
                    <li><a href="./green.html">Green</a></li>
                    <li><a href="./red.html">Red</a></li>
                    <li><a href="./yellow.html">Yellow</a></li>
                    <li><a href="./pink.html">Pink</a></li>
                    <li><a href="./dark.html">Dark</a></li>
                </ul>
            </li> 
            <!-- option 4 -->
            <li><a href="#">Mega menu</a>
            	<ul>
                	<li>
                    	<div class="block no_margins cols_4 center">
                        	<img src="./img/logo.png" align="" />
                            <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aliquam iaculis vestibulum nunc non porta. Nam ligula mi, aliquet vel dapibus sed, porttitor sit amet purus. Nunc eget interdum arcu. Donec tincidunt pretium libero, iaculis malesuada dolor condimentum vitae. Suspendisse et arcu at risus ullamcorper aliquet et sed nisi. Nullam venenatis porttitor eros, ac auctor nunc eleifend et. Pellentesque magna risus, volutpat a euismod at, accumsan vel erat. Nam nec gravida augue. Cras augue magna, ornare vel imperdiet eget, semper sed enim. </p>
                       	</div>
                    </li>
                    <li><a href="./index.html" class="first">More menues</a>
                    	<ul class="regular_menu">
                        	<li><a href="#">Option 1</a></li>
                            <li><a href="#">Option 2</a></li>
                            <li><a href="#">Option 3</a></li>
                            <li><a href="#">Option 4</a></li>
                            <li><a href="#">Option 5</a></li>
                        </ul>
                    </li>
                </ul>
            </li> 
            <!-- option 5 -->
            <li><a href="#">Follow me</a>
            	<ul>
                	<li>
                    	<div class="block">
                    		<a href="#"><img src="./img/facebook.png" /></a> <a href="#"><img src="./img/twitter.png" /></a> <a href="#"><img src="./img/skype.png" /></a> <a href="#"><img src="./img/digg.png" /></a> 
                            <a href="#"><img src="./img/linkedin.png" /></a> <a href="#"><img src="./img/rss.png" /></a> <a href="#"><img src="./img/wordpress.png" /></a> <a href="#"><img src="./img/youtube.png" /></a>
                        </div>
                    </li>
                </ul>
            </li> 
            <li><a href="#">Not a menu</a>
            <li class="hidden top_menu"><a href="#"><img src="./img/logo-dark.png" alt="Buy at CodeCanyon.com" /></a></li>
        </ul> 
		<!-- HERE ENDS THE MENU -->
    </div>
</div>
<div id="container">
	<div class="wrapper">
		<h1 style="text-align:center;">Scroll down this page, meanwhile check the blue menubar under the header!</h1>
        <div class="block cols_8 left">
            <p>Tired of 'sticky header' plugins that make that annoying 150 height header stay always on top? Here it's the solution: <strong>Sticky MenuBar</strong>. Just select what DOM object is your &lt;ul&gt; based menubar in, and the script will make it sticky on top of your screen whenever your visitors scroll your page. Once you scroll back up, it will stop at the right position.</p>
            <p>The plugin also works as a Multi Level dropdown Mega Menu, and comes in 6 different CSS color templates for you to use.</p>
        </div>
        <div class="clear"></div>
        <h1>Installation</h1>
      <div class="block cols_8 left">
            <p>Sticky MenuBar plugin consists of basically 5 files:
            <ul>
            	<li>js/jquery-1.5.1.min.js</li>
            	<li>stickybar/jquery.stickymenu.js</li>
                <li>stickybar/stickymenu.~color~.css</li>
                <li>stickybar/arrow-right.png</li>
                <li>stickybar/arrow-down.png</li>
            </ul>
<br />
            There are 6 available colors to choose. <strong>Blue, green, red, yellow, pink and dark</strong>. Of course you can make your own CSS templates, which is probably the best, for I'm not very good with CSS.
            </p>
            <p>
            Once you have found these 5 files (the 2 .js files, one of the color .css files and the two images), the first thing you have to do is copy them within your web documents, inside a folder called <strong>sticky</strong>. Then include the js and css files between &lt;head&gt; and &lt;/head&gt; tags inside your html document. This is how it should look like:
          <p>
            <em>
            &lt;link rel=&quot;stylesheet&quot; type=&quot;text/css&quot; href=&quot;stickybar/stickymenu.blue.css&quot; /&gt;    <br />        
            &lt;script type=&quot;text/javascript&quot; src=&quot;stickybar/jquery-1.5.1.min.js&quot;&gt;&lt;/script&gt;<br />
            &lt;script type=&quot;text/javascript&quot; src=&quot;stickybar/jquery.stickymenu.js&quot;&gt;&lt;/script&gt;            
            </em>          
          </p>
          <p>
          Next thing to do is to decide where is your menubar (in case you are using your very own menubar). Usually menubars are simple &lt;ul&gt; in the header, but sometimes these menubars are included in their own &lt;div&gt;. To make it a little more visual, I will write some examples.
        </p>
           <p><h3>Example #1</h3>
            <p><em><strong>
            &lt;div class=&quot;header&quot;&gt;<br />
            ... header stuff here ...<br />
            &lt;/div&gt;<br />
            &lt;div class=&quot;menubar&quot;&gt;<br />
            &lt;ul class=&quot;menu_ul&quot;&gt; ... menubar stuff here ...&lt;/ul&gt;<br />
            &lt;/div&gt;</strong></em>
        </p>
              </p>
        </p>
          <p><h3>Example #2</h3>
          <p><em><strong>
          &lt;div class=&quot;header&quot;&gt;<br />
          ... header stuff here...<br />
        	&lt;ul class=&quot;menubar&quot;&gt; ... menubar stuff here ... &lt;/ul&gt;<br />
        	&lt;/div&gt;</strong></em>
       	</p>
        <p>
        In either case, what you want to do is to turn '.menubar' as the floating object, but in the 1st example, the floating object is not the menu object. In the second example, floating object and menu object are the same &lt;ul&gt;. So, once again, between your &lt;head&gt; and &lt;/head&gt; tags you need to include the script code:
        </p>
        <p>
        <em><strong>        &lt;script language=&quot;javascript&quot; type=&quot;text/javascript&quot;&gt;<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$(document).ready(function() {<br />
                        <br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* For example #1 */<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.menu_ul').stickyMenubar({<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;floatingDiv: $('.menubar'),<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
                        <br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;/* For example #2 */<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;$('.menubar').stickyMenubar({<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;floatingDiv: $('.menubar'),<br />
                        &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br /><br />
         &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;});<br />
          &lt;/script&gt;</strong></em></p>
        <p><em>        </em>
        </p>
      </div>
      <div class="block clear"></div>
      <h1>Customization</h1>
      <p>
      The plugin accepts the following options.
      <p><strong>floatingDiv</strong>: the DOM element to be used as the floating menu</p>
      <p><strong>floatingDivBackground</strong>: (true or false) sets if the background used on the actual menu, is going to be used on the floating element too</p>
      <p><strong>onScroll</strong>: (callback) function executed when the header is visible and the options menu sticks to it's original position</p>
      <p><strong>onLeaveTop</strong>: (callback) function executed when the header dissapears from the screen, and the menu becomes sticky to the top of the screen</p>
      <p>These last 3 callback functions are very usefull for adding/deleting some margin-bottom from the header (in case all your content goes up when the options menu becomes "position:relative"). Also very usefull for showing or hiding options depending on the place of the page the visitor is watching (scroll up to the header to see the example on the actual menubar)</p>
      </p>
    </div>
</div>
<div id="footer">
	<div class="wrapper">
    </div>
</div>
<!--DEMO end-->
	</div>
<div style="text-align:center;clear:both">
</div>



用戶評論
大牛,別默默的看了,快登錄幫我點評一下吧!:)      登錄 | 注冊


熱門標簽: flash導航菜單 flash導航條 flash導航 flash菜單 flash下拉菜單 flash下拉導航菜單 導航切換 菜單切換 滑動導航菜單 滑動導航 滑動菜單 浮動菜單 浮動導航 滾動導航菜單 滾動菜單 滾動導航 右鍵菜單 收縮菜單 收縮導航 h5動畫導航 h5動畫菜單 html5動畫導航 html5動畫菜單 滑動選項卡 滑動切換 滾動切換 滾動條切換 滑動手風琴 選項卡切換 選項卡 切換 tab切換 頁面切換 選項卡插件 切換插件 收縮展開 展開收縮 收縮 展開 切換按鈕 表單 表單美化 表單插件 表單美化插件 導航菜單 導航條 菜單欄 導航欄 分類導航 響應式導航條 響應式導航 導航切換 菜單切換 收縮菜單 收縮導航 二級菜單 二級導航菜單 二級導航 下拉列表 下拉菜單 下拉導航 下拉導航菜單 下拉菜單導航 響應式下拉菜單 導航菜單插件 導航插件 菜單插件 顏色選擇 顏色選擇器
×
×

注冊

官方QQ群

掃描上面二維碼加微信群

官方QQ群

jQuery/js討論群
群號:642649996
Css3+Html5討論群
群號:322131262

加群請備注:從官網了解到

老夫子电子