月光林地的網頁技術部

網頁課程教材

0%

[技能檢定]題組一 步驟21 完成選單功能

發表於 更新於 歸屬於 ， ，

選單功能是前台功能中較為複雜的一個項目，因為有主次選單的關係，很多人會在這邊搞混，要特別注意巢狀迴圈應用上容易犯錯的地方；

另外，版型檔案雖然有提供了相關的JS及CSS，但是經過測試顯示上怪怪的，因此我們會調整一下顯示次選單的方式。

記得在後台配合題目要求先將相關選單的項目先建好。

我們一樣可以先在類別中把選單的資料準備好，首頁再來做顯示的處理，也可以直接在類別中就把整個選單的html碼就準備好，先嘗試在類別中準備好資料的做法
/Controller/Menu.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
function show(){

    //先取出所有設為顯示的主選單
    $rows=$this->all(['main_id'=>0,'sh'=>1]);

    //檢查每一個主選單，確認是否有次選單
    foreach($rows as $idx =>$row){

        //如果有次選單，則存在主選單的資料陣列中
        //如果沒有次選單，則$row['subs']會是個空陣列
        $row['subs']=$this->all(['main_id'=>$row['id']]);

        //將增加了subs 資料的$row存回 $rows 中
        $rows[$idx]=$row;
    }

    return $rows;
}

index.php

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
<div id="menuput" class="dbor">
    <!--主選單放此-->
    <span class="t botli">主選單區</span>
    <?php
    //執行物件中的show()方法來取得包含了次選單的主選單資料
    $rows=$Menu->show();
    foreach($rows as $row){
        echo "<div class='mainmu'>";
        //在連結屬性中加入選單的連結
        echo "<a href='{$row['href']}'>";

        //顯示連結文字
        echo $row['text'];
        echo "</a>";

        //判斷是否有次選單，有則顯示次選單
        if(!empty($row['subs'])){

            //將次選單包在一個class為mw的容器中
            echo "<div class='mw'>";
            foreach($row['subs'] as $sub){
                echo "<div class='mainmu2'>";
                echo "<a href='{$sub['href']}'>";
                echo $sub['text'];
                echo "</a>";
                echo "</div>";
            }
            echo "</div>";
        }
        echo "</div>";
    }
    ?>
</div>

由於素材附的css沒有設定主選單的高度，我們的做法會在顯示次選單時把整個主選單撐大，
因此我們可以調整一下css中的設定，讓次選單的顯示和參考圖接近。
css/css.css

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
.mainmu
{
    position:relative;
    border-radius:10px;
    background:url(../icon/menu.fw.png) center no-repeat;
    background-size:cover;
    line-height:30px;
    padding:2px 10px 2px 10px;
    margin:7px 1px 7px 1px;
    height:30px;  /*增加一個固定高度來避免被內容撐開*/
}

/*增加一個.mw的css設定，用來調整次選單的位置及寬度
 *並且預設為不顯示次選單，直到滑鼠移到主選單上時才顯示
 */
.mw{
	position: relative;
	top:-15px;
	left:75px;
	z-index:10;
}

/*以下兩個css設定非必要，只是增加視覺效果及操作感*/
.mainmu a{
    display:block;
    text-decoration:none;
}

.mainmu a:hover{
    text-decoration:underline;
}