這個jQuery導航選單怎麼樣

阿新 • • 發佈：2019-01-18

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>jQuery滑鼠懸停上下滑動導航條 - 柯樂義</title><base target="_blank" />
<link href="http://keleyi.com/keleyi/phtml/jqtexiao/39/hovertreedaohang.css" rel="stylesheet" type="text/css" />
<script src="http://hovertree.com/ziyuan/jquery/jquery-1.11.3.min.js" 
></script>
<script>
$(document).ready(function() {
$("#hovertreecaidan li a").wrapInner( '<span class="out"></span>' );
$("#hovertreecaidan li a").each(function() {
$( '<span class="over">' + $(this).text() + '</span>' ).appendTo( this );
});
$("#hovertreecaidan li a 
").hover(function() {
$(".out",    this).stop().animate({'top':    '48px'},    300); // move down - hide
$(".over",    this).stop().animate({'top':    '0px'},     300); // move down - show
}, function() {
$(".out",    this).stop().animate({'top':    '0px'},     300); // move up - show
$(".over",    this).stop().animate({ 
'top':    '-48px'},    300); // move up - hide
});
});
</script>
</head>
<body>
<div id="hovertreecaidan" class="hovertreedaohang">
<ul>
<li><a href="http://keleyi.com">首 頁</a></li>
<li><a href="http://keleyi.com/menu/jquery/">jQuery</a></li>
<li><a href="http://keleyi.com/menu/webqd/">Web前端</a></li>
<li><a href="http://keleyi.com/menu/javascript/">Javascript</a></li>
<li><a href="http://keleyi.com/menu/html5/">HTML5</a></li>
<li><a href="http://hovertree.com/">HoverTree</a></li>
<li><a href="http://hovertree.com/texiao/">網頁特效</a></li>
<li><a href="http://tool.keleyi.com/">工具</a></li>
<li><a href="http://hovertree.com/guestbook/">留言</a></li>
</ul>
<div class="hvtclear"></div>
</div> 
</body>
</html>

其中jQuery的wrapInner() 方法使用指定的 HTML 內容或元素，來包裹每個被選元素中的所有內容 (inner HTML)。

這個jQuery導航選單怎麼樣

<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>jQuery滑鼠懸停上下滑動導航條 - 柯樂義</title><base targ

jquery導航選單

使用jquery做出動畫特效的選單 jquery思路： 1、點選多級選單一級選單時，二級選單會在slideUp()與slideDown()之間進行切換，使用slideToggle(); 2、點選二級選單時，三級選單會以動畫的效果出現與隱藏,需要一個變數來儲存當前的狀態，當

55款超強 jQuery 導航選單外掛

jquery.mb.verticalSlider lets you show a long list of elements managing pagination, it can work with elements already in the DOM of you

jquery 實現選單橫向滑動以及滑動選單時對應導航選中

1：實現效果 2：css 部分可自己補充； 3：簡單的html部分； @* 菜品導航 *@ <ul class="grin_nav"> <li class="navActive"> <span>酸

jQuery實現導航選單伸縮效果

效果描述：若選單未展開點選則顯示子選單，否則將子選單上卷收縮，同時菜單方向圖示進行改變  <div class="leftMenu" id="leftmenu"> <div cla

46 jQuery-列表中的導航選單

1. 效果圖 2.html程式碼 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>45 jQuery-列表中的導航選單</ti

jquery固定在頂部的導航選單

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://w

jquery和css3實現滑動導航選單

1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 2 <html xmlns="ht

導航選單固定頭部跟隨螢幕滾動jQuery外掛

(function($){ $.extend($.fn, { posfixed: function(configSettings){ var settings = { direction:"top",

jquery實現側邊欄手風琴三級導航選單demo

jquery實現側邊欄手風琴三級導航選單效果圖: 引入檔案，font-awesome為字型庫檔案： <link rel="stylesheet" type="text/css" href="Font-Awesome-3.2.1/css/font-aweso

如何利用jQuery製作下拉導航選單

下拉導航選單可以用jQuery製作，首先做三個導航條（css程式碼省略了） <div> <ul> <li> <a href="" class="li">襯衫</a> <ul clas

jquery實現的固定位置下拉隱藏上拉顯示懸浮導航選單特效

<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>jquery固定位置下拉隱藏上拉顯示懸浮導航選單特效程式碼 </title

Mui、H5+開發APP小技巧①:點選底部導航選單切換介面

綜述為了使自己更好的往全棧工程師方向發展，最近在學習一個混合app開發模式。就是使用Dcloud進行開發APP。通過幾天的學習感覺這個混合app開發非常方便，我也開始總結一下開發小技巧進行記錄，方便在以後的開發中可以進行使用。在我們平常使用的APP中，一般操作選單都是放在頁面的底部，

經典的導航二級式導航選單增強版

分享一下我老師大神的人工智慧教程！零基礎，通俗易懂！http://blog.csdn.net/jiangjunshow 也歡迎大家轉載本篇文章。分享知識，造福人民，實現我們中華民族偉大復興！

vue元件開發之導航選單元件封裝

執行結果：呼叫程式碼部分： <template> <div id="app"> <menu-bar :list="list" @click="menuClick"></menu-bar> <!--fir

jquery保持選單始終處於網頁頂部

以下程式碼片段允許某一元素始終處於頁面頂部。可以想見，其非常適合處理導航選單、工具欄或者其它重要資訊。 $(function(){ var $win = $(window); var $nav = $('.mytoolbar'); var navTop = $('.mytool

jQuery左側選單例項

1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Title</title> 6 &l

js實現當前導航選單高亮顯示

html： <div id="navi"> <ul> <li><a href="1.html">主頁</a></li> <li><a href="2.html">欄目1</a></l

jQuery導航欄，點選切換顏色

1.寫好靜態頁面 <div class="navBox"> <div class="comWidth"> <ul class="nav"> <li class="active"

magento 後臺建立導航選單並設定許可權

1. 建立導航選單模組配置檔案 <adminhtml></adminhtml> 下 <menu> &nbs

這個jQuery導航選單怎麼樣

相關推薦