簡易Menu導覽(巡覽)列加文章下拉效果

我要來實作一個簡單的Menu導覽(巡覽)列。

一、先首我們準備好HTML內容:


<!--巡覽列-->
    <div id="navigation">
        <div id="container">
            <ul id="firstul">
                <li id="home" class="active"><a href="#" title="Home">首頁</a></li>
                <li id="news"><a href="#" title="讀書心得" id="mynews">讀書心得</a></li>
                <li id="about"><a href="#" title="有關我" id="about_us">有關我</a></li>
            </ul>
            <div id="mypage" style="display: none" align="center">
            </div>
        </div>
    </div>
    <!-- 文章:預設只顯示標題 -->
    <div id="content">
        <span id="title01">數位式競爭--讀書心得</span><br>
        <div id="title01_content" style="display: none;">
            這本書為民國89年出版,已經在我書架上很多了年,是我讀大學時的教科書,老師花了一個學期就只上這本書,當時讀起來沒什麼感覺,頂多只是為了交報告而讀,但很奇怪,它就是一直在我的書架上,雖然十多年來,書架上的書已經換了好幾回,尤其是資訊類的書,換的速度之快連我都怕,不過一本好書一定有存在的價值,不會因為時間的變動而有任何改變。我每天可以說都在與技術文件為「舞」,只是不知是我看它跳還是它看我跳。就這樣有一天,不知為何,好像「它」在跟我招手,然後說,來看看我吧,離上次你讀我已經是九年多前的事了,我能給你一些「明牌」!古人說:「不經一事,不長一知。」你沒有經歷過的事,說再多感受就是有限。但九年後的今天重讀本書,真是感受良多,這本書應該是十年前版的「由A到A+」。我一直很佩服國外的研究學者,能花那麼多時間、精神來研究出原本為「隱性」的知識,讓想要更上一層樓的人可以有方法可循。看完這本書後,讓我心有戚戚,十多年前的故事,現在每天還是在不斷重覆發生,不管是成功的故事,還是失敗的故事。我想這可能是知識的傳遞、了解到最後的落實還有很大一段差距。如果你從事軟體相關產業,而還沒有看過這本書,我非常建議你買來看看(我不知道還買不買的到)。
        </div>
        <span id="title02">The Last Lecture -- 讀書心得</span><br>
        <div id="title02_content" style="display: none;">
            「最後的演講」,是一位父親留給孩子的遺言。沒錯,是遺言。聽起來是個不好的消息,但也因為是遺言,所以他必須認真思考要留下什麼給他的孩子們,他晚婚,他小孩都還小,他有成就,他患癌。最後的演講分為兩個部分,一是演講影片,二是書本。我是先看書再看影片,影片的部份,你可以搜尋「朱學恆」在他的部落格裡有影片檔和中文字幕,影片是免費的。這場演講為什麼會是全世界轟動?我想,除了是作者蘭迪.鮑許(Randy
            Pausch)本身在面對癌症時還能散發不可思義的"樂觀"魅力,還有一種「人之將死,其言也善。」的人生智慧在裡面。人生有方向,是多麼重要及快樂的一件事,首先,是完成自我的夢想,然後是啟發他人的夢想,還可以進一步幫助他人完成夢想。這是Randy教授最後想跟我們說的話。反之,也就是人生一定要有「目標」、要有「方向」,要知道你自己的「路」在那裡。這或許是我喜歡讀些哲學類的書籍關係,思考一件的事的角度之多,或許不是你能想像的,提高看事的高度,提高做事的層度,努力的成就自己,但也不要忘了幫助別人,造成一個良性循環的社會。
        </div>
        <span id="title03">Word of Mouth Marketing--讀書心得</span><br>
        <div id="title03_content" style="display: none;">
            我的信箱中有許多的電子報,每天上班第一件事就開打開信箱,確認一下有沒有重要人士的信件,看看Log信件,看看電子報,其實訂了那怎多的電子報,絕大部份都在1-10秒內被我的食指結束生命,快快的按下那Delete鍵,然後Next。而某天的一封電子報裡刊載的標題讓我有興趣「掃」一下,看完後(很少有認真看完全部),內容簡潔但又不失內容,後來又收到幾期的內容,一樣,都是很直接也實用的內容,文筆也不會看了想睡覺。這些電子報其實也是行銷手腕的一種,精選幾段精彩的內容,吸引你的注意,如果你也確實被吸引,但因為你只是看到部份的片面,這時就要看這些精彩的內容是否有足夠的吸引內,讓你採取行動,拿出新台幣去換一本有完整內容的書本。而我,被打動了。雖然我不是行銷人員,但我對行銷、管理方面的知識算很有興趣,一樣是動腦的工作,但行銷、管理和程式就是不同。而作者除了提供大量免費實用的做法外,也提供簡單的5個步驟打造好的「口碑」。
        </div>
    </div>


  • 巡覽列:我們先使用ul及li元素配合CSS來做UI的工作。
  • 文章:一開始只會顯示標題,使用者點選標題,才顯示文章內容。

二、巡覽列之CSS


/*ul元素設定*/
#navigation ul
{
 list-style-type : none ;
 margin : 0 auto; /*置中*/
 padding : 0;
 width : 850px;
}

/*讓li"浮"起來,變成"橫向列"*/
#navigation li 
{
 float : left ;
}

/*Menu中a元素設定*/
#navigation a 
{
 float : left ;
 display : block ; /*以「區塊」元素方式顯示*/
 color : rgb(197,197,197);
 padding : 5px 8px;
 margin-top : 10px;
 border-bottom-width : 0;
}

/*li中類別為active的a元素設定*/
#navigation li.active a
{
 color : rgb(255,204,0);
 background-color : rgb(153,153,153);
}

/*Menu中a元素:hover及:active設定 */
#navigation a:hover, #navigation a:active
{
 color : rgb(204,204,255);
 background-color : rgb(100,90,125);
}

/*文章區塊,<div id="content">設定 */
#content
{
 clear : both ;
 width : 850px;
 margin : 0 auto; /*置中*/
 padding : 0;
 background-color : rgb(193,189,204);
}

/* 文章標題,讓jQuery動態加入 */
.newstitle
{
 color :Black ;
 border-bottom : 1px dotted gray;
}

/* 文章內容,由jQuery動態控制  */
.newscontent
{
 width : 50%;
 color : Black ;
 background-color : rgb(255,153,51);
 border : 1px dotted gray;
 padding : 7px 30px 10px 25px;
}

建議一段一段複製,看整個畫面變化的過程,才能了解為什麼這樣設定。

三、jQuery程式碼


再來就是jQuery來設定文章標題樣式及文章內容顯示部份:
$(function() {
    $("#firstul li:eq(0)").removeClass("active"); //先將"首頁"的類別移除
    $("#firstul li:eq(1)").addClass("active");  // 將"讀書心得"設定.active類別
    $("span[id]").addClass("newstitle"); // 文章標題設定

    $("#title01").click(function() { //點擊標題時,
        //文章內容加入.newscontent類別設定
        $("#title01_content").addClass("newscontent").toggle("slow"); 
        //其他非title01的內容,全部hide()
        $("div[id^=title]:not(#title01_content)").hide("slow");
    });

    $("#title02").click(function() {
    $("#title02_content").addClass("newscontent").toggle("slow");
    $("div[id^=title]:not(#title02_content)").hide("slow");
    });

    $("#title03").click(function() {
    $("#title03_content").addClass("newscontent").toggle("slow");
    $("div[id^=title]:not(#title03_content)").hide("slow");
    });
});

這樣我們就完成了一個起簡單版的Menu巡覽列(CSS實作)加上切換文章內容功能(jQuery)的網頁。程式還有很多改進的空間,加油!

1 則留言:

感謝您的留言,如果我的文章你喜歡或對你有幫助,按個「讚」或「分享」它,我會很高興的。