jQuery實現側邊導航欄效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <meta name="keywords" content="JS程式碼,側邊選單,拉出選單,高階選單,導航選單,jquery選單" /> 6 <meta name="description" content="jQuery高階可停靠側邊欄，jquery實現的高階側邊導航選單效果，更多側邊選單,拉出選單,高階選單,導航選單,jquery選單請訪問柯樂義JS程式碼頻道。"/> 7 <title>jQuery高階可停靠側邊欄_柯樂義</title> 8 <link type="text/css" rel="Stylesheet" href="http://keleyi.com/keleyi/phtml/jqmenu/2/keleyidock.css" /> 9 <script type="text/javascript" src="http://keleyi.com/keleyi/pmedia/jquery/jquery-1.10.2.min.js"></script> 10 <script type="text/javascript"> 11 $(document).ready(function () { 12 var docked = 0; 13 14 $("#dock li ul").height($(window).height()); 15 16 $("#dock .dock-keleyi-com").click(function () { 17 $(this).parent().parent().addClass("docked").removeClass("free"); 18 19 docked += 1; 20 var dockH = ($(window).height())/ docked 21 var dockT = 0; 22 23 $("#dock li ul.docked").each(function () { 24 $(this).height(dockH).css("top", dockT + "px"); 25 dockT += dockH; 26 }); 27 $(this).parent().find(".undock").show(); 28 $(this).hide(); 29 30 if (docked > 0) 31 $("#content").css("margin-left", "250px"); 32 else 33 $("#content").css("margin-left", "60px"); 34 }); 35 36 $("#dock .undock").click(function () { 37 $(this).parent().parent().addClass("free").removeClass("docked") 38 .animate({ left: "-180px" }, 200).height($(window).height()).css("top", "0px"); 39 40 docked = docked - 1; 41 var dockH = ($(window).height()) / docked 42 var dockT = 0; 43 44 $("#dock li ul.docked").each(function () { 45 $(this).height(dockH).css("top", dockT + "px"); 46 dockT += dockH; 47 }); 48 $(this).parent().find(".dock-keleyi-com").show(); 49 $(this).hide(); 50 51 if (docked > 0) 52 $("#content").css("margin-left", "250px"); 53 else 54 $("#content").css("margin-left", "60px"); 55 }); 56 57 $("#dock li").hover(function () { 58 $(this).find("ul").animate({ left: "40px" }, 200); 59 }, function () { 60 $(this).find("ul.free").animate({ left: "-180px" }, 200); 61 }); 62 }); 63 </script> 64 </head> 65 <body> 66 <ul id="dock"> 67 <li id="links"> 68 <ul class="free"> 69 <li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>連結</li> 70 <li><a href="http://keleyi.com/menu/cms/" >CMS</a></li><li><a href="http://keleyi.com/menu/net/" >.NET</a></li><li><a href="http://keleyi.com/menu/javascript/" >Javascript</a></li><li><a href="http://keleyi.com/menu/jquery/" >jQuery</a></li><li><a href="http://keleyi.com/menu/csharp/" >C#</a></li><li><a href="http://keleyi.com/menu/aspnet/" >ASP.NET</a></li><li><a href="http://keleyi.com/menu/mvc/" >MVC</a></li><li><a href="http://keleyi.com/menu/html5/" >HTML5</a></li> 71 <li><a href="http://keleyi.com/menu/webqd/" >web前端</a></li><li><a href="http://keleyi.com/menu/sqlserver/" >SQL Server</a></li><li><a href="http://keleyi.com/menu/cpp/" >C++</a></li><li><a href="http://keleyi.com/menu/hbyy/" >組合語言</a></li><li><a href="http://keleyi.com/menu/flhz/" >分類彙總</a></li><li><a href="http://keleyi.com/menu/other/" >其他</a></li><li><a href="http://keleyi.com/list/">最新文章</a></li><li><a href="http://keleyi.com/ziliao/js/zzbds.htm">JS正則表示式</a></li> 72 </ul> 73 </li> 74 <li id="files"> 75 <ul class="free"> 76 <li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>遊戲</li> 77 <li><a href="http://keleyi.com/game/1/">HTML5捕魚遊戲</a></li> 78 <li><a href="http://keleyi.com/game/2/">不上不下</a></li> 79 <li><a href="http://keleyi.com/game/3/">打地鼠</a></li> 80 <li><a href="http://keleyi.com/keleyi/phtml/silverlight/">猜數字</a></li> 81 <li></li> 82 </ul> 83 </li> 84 <li id="tools"> 85 <ul class="free"> 86 <li class="header"><a href="#" class="dock-keleyi-com">固定</a><a href="#" class="undock">隱藏</a>工具</li> 87 <li><a href="http://keleyi.com/tool/md5.htm">MD5加密</a></li> 88 <li><a href="http://keleyi.com/tool/htmlencode.htm" target="_blank">HTML編碼與解碼</a></li> 89 <li><a href="http://keleyi.com/tool/urldecode.htm" target="_blank">URL編碼與解碼</a></li> 90 <li><a href="http://keleyi.com/tool/regex.htm" target="_blank">.NET正則表示式匹配工具</a></li> 91 <li><a href="http://keleyi.com/ziliao/googlejavascriptstyle.htm">JavaScript程式碼風格指南</a></li> 92 <li><a href="http://keleyi.com/ziliao/unicode/">Unicode字元列表</a></li> 93 <li><a href="http://keleyi.com/tool/color.htm" target="_blank" title="顏色選擇器"><img src="http://keleyi.com/tool/color/colormap_80.gif" alt="顏色選擇器" /></a></li> 94 </ul> 95 </li> 96 </ul> 97 <div id="content"> 98 <h1>keleyi.com</h1> 99 <h2>jQuery高階可停靠側邊欄</h2> 100 <p> 101 把游標移動到左側按鈕上，相應的側邊欄會自動彈出。 102 </p> 103 <p> 104 當游標離開欄目區域時，側邊欄自動隱藏。 105 </p> 106 <p> 107 側邊欄彈出時，點選“固定”連結可以使相應的欄目固定，不自動隱藏。 108 </p> 109 <p> 110 點選“隱藏”連結可以是相應欄目隱藏。 111 </p> 112 <p> 113 原文：<a href="http://keleyi.com/a/bjac/mt97p5y9.htm" target="_blank">http://keleyi.com/a/bjac/mt97p5y9.htm</a> 114 </p> 115 </div> 116 117 <div style="text-align:center;clear:both"> 118 <p>來源：<a href="http://keleyi.com" target="_blank">網路</a> 程式碼整理：<a href="http://keleyi.com" target="_blank">柯樂義</a> 感謝：<a href="http://keleyi.com" target="_blank">keleyi</a></p> 119 <p>轉載請註明出處，此程式碼僅供學習交流，請勿用於商業用途。</p> 120 </div> 121 </body> 122 </html>
相關推薦
jQuery實現側邊導航欄效果
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 5 <m
jQuery實現側邊導航手風琴效果
側導航的手風琴效果是指，點選含子層導航的父導航時，使原本隱藏的子導航顯示，再次點選，子層導航又恢復隱藏，同時，同一時間只有一個父導航的子導航能夠顯示 $("#sidenav > li").find('.sub-nav').hide();
jquery實現側邊欄手風琴三級導航選單demo
jquery實現側邊欄手風琴三級導航選單 效果圖: 引入檔案，font-awesome為字型庫檔案： <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-aweso
實現Material Design風格的Actionbar和Drawer側邊導航欄
<strong><span style="font-size:18px;">前言：</span></strong> 自從Google公佈了Material Design之後，Android App的UI更加好看了，動畫也n
jquery實現側邊欄
效果圖如下：主要用了jquery的mouseenter和mouseleave屬性和animate動畫屬性。程式碼為：<!DOCTYPE html> <html> <hea
jquery實現側邊欄左右伸縮
jquery實現點選側邊欄伸縮效果。點選收縮，側邊欄向左收縮，顯示按鈕顯示；點選顯示按鈕，顯示按鈕向左收縮，側邊欄顯示。 具體程式碼如下： <!DOCTYPE html> <html
SB Admin 2 修改側邊導航欄寬度
boot css 分享 側邊欄 vpd efault 寬度 inpu boa SB Admin 2, 一個免費的 bootstrap 主題，具有很廣泛使用規模，實際使用中發現，導航的側邊欄太寬了，有過右側有大型datatable，會變得很難看。 <div class
側邊導航欄
import React, { Component } from 'react' import PropTypes from 'prop-types' import classnames from 'classnames' import { Link, IndexLink } from 'dva/r
jQuery實現大型網站導航欄，滑鼠移出使用mouseout使內容框隱藏但當滑鼠滑到框時已經隱藏如何解決？
大型網站比如慕課網，電商商城的導航都是左側導航分類，右側是輪播圖，然後當滑鼠經過導航分類時顯示對應的內容框；這個就用到我之前寫的如何點選頂部導航顯示對應的左側邊欄，原理是相同的； 先來看一下我要實現的效果圖： 跟以前寫的點選主導航顯示對應的左側欄，但因為這裡nav_
側邊導航欄css示例
效果展示： html： <div class="sidebar"> <ul> <li>優先順序 <ul&g
jquery實現angular左側導航欄,頁面重新整理仍選中
1、最近幫新來的同事寫了一個基於angular專案的左側導航欄，由於之前的導航採用ng-repeat生成，用angular事件處理，程式碼量較大 專案用了阿里字型、jquery外掛 效果圖如下： 2
仿京東商城側邊導航欄寫法
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html
關於Qt實現側邊欄隱藏與顯示的效果
通過ToolButton來實現某控制元件的隱藏與顯示，具體功能為點選toolbutton後，某widget（以tabWidget為例）隱藏於左側，toolbutton位於（0，0）座標處，顯示的icon也進行切換；再次點選後，tabwidget展開，toolbutton還原
非常漂亮的純css3實現多彩側邊導航（非常流暢），附效果演示
<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title> <style type="text/css"
JQuery.HoverDir庫實現側邊欄二級選單
Jquery.hoverDir響應滑鼠移動方向的懸停效果外掛 HTML程式碼 <div id="sidebar"> <div class="mainNavs"> <div class="m
jQuery網站側邊隱藏展開導航插件二（轉）
osi width ica pointer 隱藏 gif xhtml and -type <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xh
個人中心的側邊欄--用jq實現側邊欄點擊一塊出現一塊其他幾塊隱藏並且同時改變前面的img圖片
icon -a 儀器 cor 個人 con 圖片 AC 默認 實現的效果： 默認狀態下： 點擊下面的標題時： html代碼： <h2>商品分類</h2> <div class="categories"> <ul cla
CSS3實現側邊欄快速定位的隱藏和消失
Dome <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>CSS3隱藏懸浮網站左側標籤式導航欄程式碼 </title>
使用Android DrawLayout實現側邊欄功能
“千呼萬喚始出來，猶抱琵琶半遮面”，白居易的《琵琶行》中，兩句話將琵琶女的難言之痛與羞澀情態描寫的逼真生動，一個抱著琵琶的女子呼之欲出，她的羞澀之美令人久久難以忘懷。 生活中有含蓄之美，程式設計也不能將所有的功能一下子全部展示給使用者，當然這也無法實現。這個
metisMenu.js動態側邊導航的實現（ajax動態渲染部分導航）
使用metisMenu.js實現後臺管理系統的導航，通過點選導航，切換不同的頁面內容。有些時候。我們需要動態新增頁面的內容，即通過ajax請求後臺來渲染部分導航的內容。 第一部分是靜態導航的實現，即通過點選導航切換右側頁面的實現。第二部分是動態渲染導航的實現。（demo例子