這堂課我們會學習到的語法包含：
HTML和CSS語法
.text( )
$(":not(selector)")
mouseover和mouseenter的差異
mouseout和mouseleave的差異
<ul>：無順序性表單（unordered list）
<li>：清單（list）
float：浮動
margin：邊界
padding和margin的差別（margin是調整內容以外的邊界；padding是調整內容以內的邊界）
list-style-type：設定標點類型
jQuery語法
.css(屬性名稱,修改的值)：修改css樣式
$(selector).length：計算selector有幾個元素
.slideUp( ) / .slideDown( ) / .slideToggle.text( )
$(":not(selector)")
mouseover和mouseenter的差異
mouseout和mouseleave的差異
這類行的下拉式選單現在很常見，像是商業週刊的網站，每移到一個選單後，它就會自動挑出選項。
方法如下：
建立一般清單
一開始我們要把我們的清單規劃如下：
每一個主選單是一個區塊，每一個次選單也是一個區塊
接著，為每個div命名，這裡可以複習一下，class（.）可以重複，id（#）不能重複。
網站之後的安排長的大概就樣這樣子
接著我們把主選單和次選單的內容填入，<ul>表示的是無順序性清單（unordered list），也就是標頭不會有12345，<li>則是可以輸入清單裡面的內容。
這裡預覽的結果如下：
CSS裝飾
接下來，我們要把我們的清單修飾一下外觀，要把它長成像是商業週刊那樣
一開始我們先把所有的標籤都還原成預設值，*：所有的標籤。
用先前所學的CSS樣式
上面的地方，我們會發現主選單並沒有被垂直置中，這時候有一個簡單的辦法，就是利用line-height（行高），把行高（line-height）設成和外框的高度（height）就可以達到垂直置中的效果，但這麼做有一個缺點，就是當我們的文字超過一行以上時，就會沒辦法使用。
其他垂直置中的方法可以參考：CSS達成DIV垂直置中的方法。
這時候我們的版面就已經長得有模有樣了吧！
再來我們把它轉成水平的頁面：
要把它轉成水平的頁面，我們要利用div把main和sub包在一起
把這個div取名叫item
接著要設定寬度，總寬度（menu）要等於主選單的寬度*主選單的數目，這裡我們的主選單的寬度（main）寬度是100px，共有3個，因此總寬度（menu）要設成100*3。
這時候，我們只要用float這個指令，讓這些item由左向右排好，它就可以變成水平的了。
float的用法可以參考這裡
結果如下：
這裡會用到.css( )和.length( )這兩個指令。
再來要記得把上面menu原本設定的寬度拿掉
這時候我們menu的寬度就會根據我們main的數目自動增加了
上面的圖片中，我們會看到list當中的標點還在，我們可以透過list-style-type語法把它拿掉，list-style-type是用來設定前面標點的類型。
版面到這裡就差不多大功告成了！
插入jQuery語法
接下來，我們可以開始寫jQuery語法了
當滑鼠點下時，請幫我滑入、滑出
滑上、滑下的語法是slideUp、slideDown、slideToggle
因為我們有很多的main，不用一一寫，用回圈的方式就可以
再來要把回圈的變數i，帶入click這個函式中使用（這裡的id、e都是可以自己取的變數，data則是關鍵字）
這裡slideUp後面的0，是表示設為0秒，等於是網友看不到一進入網頁時，次選單收起的動畫
點選某一個選單時，其他選單收合
這裡回學到一個新的語法是not，我們希望電腦幫我們做的事是當我點選某一個選單時，其他的選單都收合起來。
把$(":not(selector)")語法加進去，意思是，當我點擊時，所有的sub都要向上滑，除了我所點擊的那個除外
滑鼠移入移出使啟動滑動效果
這裡要區別一下mouseover / mouseout 和mouseenter / mouseleave
這裡我們用mouseover
滑鼠移入時切換文字
我們要用陣列的方式來切換文字，當滑鼠移過時，把中文換成英文
再來要用到text這個函式
原整的程式語法如下：
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>下拉式選單製作</title>
<style>
*{
margin:0px ;
padding:0px;
}
#menu{
margin: auto;
}
.main{
background-color:#e33535;
color:white;
font-family:微軟正黑體;
font-weight:bold;
font-size:20px;
cursor:pointer;
text-align:center;
height:35px;
line-height:35px;
width:100px;
}
.main:hover{
background-color:#4d4949;
}
.sub{
cursor:pointer;
background-color:#4d4949;
color:white;
font-family:微軟正黑體;
text-align:center;
font-weight:bold;
width:100px;
}
.sub li{
list-style-type:none;
line-height:25px;
}
.item{
float:left;
}
</style>
<script src="jquery-1.11.2.min.js"></script>
<script>
$(document).ready(function(){
var oldtext=['今日總覽','成功者故事','財經','時事','職場力']
var newtext=['Today','Success','Business','News','Career']
$(".sub").slideUp(0)
for(i=0;i<$(".main").length;i++){
$(".main:eq("+i+")").mouseover({id:i},function(e){
n=e.data.id
$(".main:eq("+n+")").text(newtext[n])
$(".sub:eq("+n+")").slideToggle()
$(".sub:not(:eq("+n+"))").slideUp()
})
$(".main").mouseout({id:i},function(e){
n=e.data.id
// $(".sub").slideUp(200)
$(".main:eq("+n+")").text(oldtext[n])
})
}
$("#menu").css("width",$(".main").length*100)
})
</script>
</head>
<body>
<div id="menu">
<!-- 第一組清單 -->
<div class="item">
<div class="main">今日總覽</div>
<div class="sub">
<ul>
<li>今日最新</li>
<li>熱門排行</li>
<li>特別企劃</li>
</ul>
</div>
</div>
<!-- 第二組清單 -->
<div class="item">
<div class="main">成功者故事</div>
<div class="sub"></div>
</div>
<!-- 第三組清單 -->
<div class="item">
<div class="main">財經</div>
<div class="sub">
<ul>
<li>產業動態</li>
<li>趨勢報導</li>
<li>地產風雲</li>
<li>投資焦點</li>
<li>個人理財</li>
</ul>
</div>
</div>
<!-- 第四組清單 -->
<div class="item">
<div class="main">時事</div>
<div class="sub">
<ul>
<li>國際</li>
<li>兩岸</li>
<li>新聞</li>
</ul>
</div>
</div>
<!-- 第五組清單 -->
<div class="item">
<div class="main">職場力</div>
<div class="sub">
<ul>
<li>經營創業</li>
<li>管理心法</li>
<li>職場修練</li>
<li>心靈成長</li>
</ul>
</div>
</div>
</div>
</body>
</html>
最後的結果就像這樣子
0 意見:
張貼留言