月光林地的網頁技術部

網頁課程教材

0%

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

發表於 更新於 歸屬於 ， ，

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

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

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

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
34
35
36
37
38
39
<div id="menuput" class="dbor">
<!--主選單放此-->
    <span class="t botli">主選單區</span>
    <?php
    //先取出所有設為顯示的主選單
    $mainmu=$Menu->all(['sh'=>1,'menu_id'=>0]);

    //利用迴圈來輸出主選單
    foreach($mainmu as $main){
    ?>
    <div class='mainmu'>
        <a  href="<?=$main['href'];?>" 
            style="color:#000; font-size:13px; text-decoration:none;">
            <?=$main['text'];?>
        </a>
        <?php
        //輸出主選單後，判斷該主選單是否有子選單
        if($Menu->count(['menu_id'=>$main['id']])>0){

            //如果有子選單，則建立一個div來放置子選單
            echo "<div class='mw'>";

            //取得該主選單的子選單
            $subs=$Menu->all(['menu_id'=>$main['id']]);

            //利用迴圈來輸出子選單
            foreach($subs as $sub){
                echo "<a href='{$sub['href']}'>";
                echo "<div class='mainmu2'>";
                echo $sub['text'];
                echo "</div>";
                echo "</a>";
            }
            echo "</div>";
        }
        ?>
    </div>
    <?php  } ?>
</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;
}