Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

如何在 Web 網頁內也可以使用像 Windows 應用程式內階層選單,將網頁內的功能進行歸類,方便使用者呢?方法很多,若是透過 ASP.net 可使用裡面的控制項元件,也可以使用 jQuery、JavaScript ,也可以使用 DHTML ...等,若是不想這麼麻煩,可以試試這套 Pure CSS Menu Maker 免費軟體,來產生純 CSS 樣式的下拉式選單。

§相關文章,還可以參閱:

如何使用Pure CSS Menu Maker?

1.下載解壓縮後,進行安裝,完成後,開啟「Pure CSS Menu Maker」主程式,若要開始建立下拉式選單,可點擊[File] >[New Project]接著選擇要製作水平或垂直階層選單,並選擇一個要儲存檔案的資料夾,最後,點擊[Okay]。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

2.接下來,可以透過左分割欄來建立選單階層。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

3.建立的同時,可在中間分隔欄完善每個選單的應填項目,同時,在右邊的分隔覽也能同步預覽選單,編輯好選單,點擊[Generate Menu]就可產生 HTML 及 CSS 檔案。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

4.所產生的 HTML 可使用記事本打開來看。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

5.可參考原始程式碼的擺放位置,就能順利地將剛剛所產生的下拉式選單放到自己的網頁裡。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

6.以上實例。

Pure CSS Menu Maker 利用 CSS 樣式表,做出網頁的下拉階層選單

typingweb 是一個功能相當完善的英打教學網站,相較於其他單一功能的網站,像是 <a href="/83/">keybr.com </a>或是 <a href="/424/">speedtest 打字速度測試</a>,typingweb 所提供的一連串英文打字所用到的功能,像是初、進階的英打練習課程、遊戲、認證、統計及個人偏好設定等相對豐富。

還記得以前要考預官時所用的智力測驗題目嗎?IQ Test 是一個類似智力測驗題目類型的益智遊戲,遊戲區分初級、中級及高級,也可以自己選擇題型來測試,都是選擇題。