PHP:pg_untrace()的用法_PostgreSQL函數
683
2023-12-12
第一個菜單實現的是點擊菜單項顯示相應的子菜單項，三角變為向下的三角。下面的菜單鼠標移動到菜單項顯示對應的子菜單項，鼠標移開子菜單消失。
下面介紹它的代碼部分：
html代碼：
head代碼部分添加標題及引用：
<span style="font-family:KaiTi_GB2312;font-size:18px;"><head> <title>JQuery實戰-菜單效果</title> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> <link type="text/css" rel="stylesheet" /> <script type="text/javascript" src="http://www.gimoo.net/t/1903/js/jquery.js"></script> <script type="text/javascript" src="http://www.gimoo.net/t/1903/js/menu.js"></script> </head></span>
body部分編輯菜單項內容，通過嵌套的ul和li來表示，菜單最外層為ul，一層每個主菜單放在一個li中。如果有子菜單，在這個主菜單的li中建立新的ul，再依次嵌套就可以構建多層的菜單。
<span style="font-family:KaiTi_GB2312;font-size:18px;"><body>
<ul>
<li class="main">
<a >菜單項1</a>
<ul style="display:none;">
<li>
<a >子菜單項11</a>
</li>
<li>
<a >子菜單項12</a>
</li>
</ul>
</li>
<li class="main">
<a >菜單項2</a>
<ul>
<li>
<a >子菜單項21</a>
</li>
<li>
<a >子菜單項22</a>
</li>
</ul>
</li>
<li class="main">
<a >菜單項3</a>
<ul>
<li>
<a >子菜單項31</a>
</li>
<li>
<a >子菜單項32</a>
</li>
</ul>
</li>
</ul>
<br/>
<ul>
<li class="hmain">
<a >菜單項1</a>
<ul>
<li>
<a >子菜單項11</a>
</li>
<li>
<a >子菜單項12</a>
</li>
</ul>
</li>
<li class="hmain">
<a >菜單項2</a>
<ul>
<li>
<a >子菜單項21</a>
</li>
<li>
<a >子菜單項22</a>
</li>
</ul>
</li>
<li class="hmain">
<a >菜單項3</a>
<ul>
<li>
<a >子菜單項31</a>
</li>
<li>
<a >子菜單項32</a>
</li>
</ul>
</li>
</ul>
</body></span>
css代碼部分
1.瀏覽器中的ul和li元素默認情況下文字前都有圓點標識符，li元素會有縮進
2.list-style屬性值為none,可清除ul和li前面的小圓點。
3.清除縮進值，padding和margin都為0，其中IE6 IE7需要把margin為0的時候才可以清除縮進值。
<span style="font-family:KaiTi_GB2312;font-size:18px;">ul,li{
list-style:none;/* //清除ul和li上默認的小圓點 */
}
ul{
/* 清除子菜單的縮進值 */
padding:0;
margin:0;
}
.main,.hmain{
background-image:url(../images/title.gif);/*指定背景圖*/
background-repeat:repeat-x;
width:120px;
}
li{
background-color:#EEEEEE;
}
a {
/*取消所有的下劃線*/
text-decoration:none;
padding-left:20px;
display:block;
display:inline-block;/* 解決ie6不兼容的問題 */
width:100px;
padding-top:3px;
padding-bottom:3px;
}
.main a,.hmain a {
color:white;/*主菜單標簽顏色為白色*/
background-image:url(../images/collapsed.gif);
background-repeat:no-repeat;
background-position:3px center; /* 圖片位置在中間 */
}
.main li a ,.hmain li a{
/* 子菜單項 */
color:black;
background-image:none;/* 不使用圖片 */
padding-left:18px;
}
.main ul,.hmain ul{
/* 子菜單隱藏 */
display:none;
}
.hmain{
float:left;/*浮動顯示*/
margin:1px;
}</span>
menu.js代碼：
1.main a選擇使用了.main這個class的元素內部所有的a節點
2.main>a選擇.main子節點中的a節點
<span style="font-family:KaiTi_GB2312;font-size:18px;">$(document).ready(function(){
//頁面的Dom已經裝載完成時，執行的代碼
$(".main > a,.hmain a").click(function(){
//找到主菜單項對應的子菜單項
var ulNode = $(this).next("ul");
// //根據情況收縮菜單
// if(ulNode=$.css("display") == "none"){
// ulNode.css("display","block");
// }else{
// ulNode.css("display","none");
// }
// ulNode.show("normal");//設置展開的速度，可以是nomal,slow,fast
// ulNode.hide();
// ulNode.toggle();//toggle設置展開或者收縮
//卷簾效果，向上或者向下
// ulNode.slideDown();
// ulNode.slideUp;
ulNode.slideToggle();
});
//麻煩的方法
// $(".hmain > a").hover(function(){
// $(this).next("ul").slideDown();
// }.Function(){
// var ulNode=$(this).next("ul");
// var timeoutId =setTimeout(function(){
// })
// ulNode.slideUp();
// },300);
// ulNode.hover(function(){
// clearTimeout(timeoutId);
// }.function(){
// $(this).slideUp();
// });
/********實現鼠標移動到指定主菜單后子菜單自動顯示*****/
$(".hmain").hover(function(){
$(this).children("ul").slideDown();
},function(){
$(this).children("ul").slideUp();
});
});
/*
*修改主菜單的指示圖標隨著子菜單的變化而變化
*
*/
function changeIcon(mainNode) {
if (mainNode) {
if (mainNode.css("background-image").indexOf("collapsed.gif") >= 0) {
mainNode.css("background-image","url('images/expanded.gif')");
} else {
mainNode.css("background-image","url('images/collapsed.gif')");
}
}
}
</span>
以上就是本文的全部內容，希望能夠幫助大家更好的實現制作菜單效果。
