|
網頁css樣式分享橫列式下拉式選單語法
我們在網頁設計與網頁製作選單時，通常會做一些像java的東西，甚至那乾脆用flash下去設計製作了。不過這些網頁設計技巧或者是語法通常製作起來好像會比較麻煩，甚至較難學習。而學習css樣式分享語法通常會比較得心應手，那是因為css樣式分享的css語法並不是那麼難理解。通常我們常常看到的css樣式分享的css語法，可能只運用在像網頁製作行距的時後，或者是像表格的設計應用、連結的按鈕或文字顏色，而應用在選單上確比較難看到。而應用用java所設計的選單格式確比較常看到。flash製作的橫式選單也常常看到，不過如果你要設計製作像子選單很多層的網頁內容選單，要用flash設計製作就比較麻煩了。而且flash下拉不能與下層的網頁設計內容重疊，這是比較麻煩的。
以下要介紹與教學分享的css樣式分享的語法css橫式下拉式選單所支援的瀏覽器是有限制的，只支援IE 7，IE5.x and IE6不能用，就只能看看有人能解這個迷了。能支援的就只有 Firefox, Opera 9, Mozilla, Netscape 8 and IE7 。
(一)將以下語法貼於<head>與</head>之間
<style type="text/css">
#pmenu, #pmenu ul {padding:0; margin:0; list-style-type: none;}
#pmenu {margin:25px 0 200px 15px;}
#pmenu li {float:left;position:relative;}
#pmenu a, #pmenu a:visited {display:block; width:100px; font-size:10px; color:#000; height:23px; line-height:22px; text-decoration:none; text-indent:5px; background:#b2ab9b; border:1px solid #fff; border-width:0 1px 1px 0;}
#pmenu li:hover > a{background:#dfd7ca; color:#c00;}
#pmenu li ul {display: none;}
#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}
#pmenu > li:hover > ul {left:0; top:24px;}
</style>
(二) 將以下語法貼於<body>與</body>之間
<ul id="pmenu">
<li><a href="#01">Top Level 1</a></li>
<li><a href="#01">Top Level 2</a></li>
<li><a href="#01">Top Level 3 »</a>
<ul>
<li><a href="#01">Sub Level 1a</a></li>
<li><a href="#01">Sub Level 1b</a></li>
<li><a href="#01">Sub Level 1c »</a>
<ul>
<li><a href="#01">Sub Level 2a</a></li>
<li><a href="#01">Sub Level 2b »</a>
<ul>
<li><a href="#01">Sub Level 3a</a></li>
<li><a href="#01">Sub Level 3b »</a>
<ul>
<li><a href="#01">Sub Level 4a</a></li>
<li><a href="#01">Sub Level 4b</a></li>
<li><a href="#01">Sub Level 4c »</a>
<ul>
<li><a href="#01">Sub Level 5a</a></li>
<li><a href="#01">Sub Level 5b</a></li>
<li><a href="#01">Sub Level 5c</a></li>
<li><a href="#01">Sub Level 5d »</a>
<ul>
<li><a href="#01">Sub Level 6a</a></li>
<li><a href="#01">Sub Level 6b</a></li>
<li><a href="#01">Sub Level 6c</a></li>
<li><a href="#01">Sub Level 6d</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 5e</a></li>
<li><a href="#01">Sub Level 5f</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 4d</a></li>
<li><a href="#01">Sub Level 4e</a></li>
<li><a href="#01">Sub Level 4f</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 3c</a></li>
<li><a href="#01">Sub Level 3d</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 2c</a></li>
</ul>
</li>
<li><a href="#01">Sub Level 1d</a></li>
<li><a href="#01">Sub Level 1e</a></li>
</ul>
</li>
<li><a href="#01">Top Level 4</a></li>
<li><a href="#01">Top Level 5</a></li>
<li><a href="#01">Top Level 6</a></li>
</ul>
(一) 的CSS設定是網頁上的表格選單上所要呼叫CSS的設定，像是下拉的動做或者是選單上的顏色，或滑鼠滑過會下拉的動作，或滑鼠滑過選單上的顏色變換。可以製作或變換看看，就可以改便它的顏色。
(二) 則是在網頁上設計一個表格，也就是選單，及要跑出的下拉式選單與更多層的選單內容。可以將二貼於記事本就可看出它有一層壹層的選單內容，就可 知道要修改的地方。 不過很可惜的它只支援IE 7，IE 6是沒有辦法產生動作的，可到Firefox瀏覽器就可以看到了。
這個css橫式下拉式選單，最主要是應用<ul>與<li>功能，將子目錄一層一層的呈現，所以只要在二的<ul>中就可看到它下拉的位置，及子選單的呈現。(一)裡的 #pmenu li:hover > a{background:#dfd7ca; color:#c00;}最主要是設定滑鼠滑過按鈕所變換的顏色，文字或是按鈕的背景顏色。#pmenu li:hover > ul {display:block; position:absolute; top:0; left:101px;}則是設定子選單下拉的動作及位置。(二)裡的 #01 則是每個按鈕連結的頁面。
|
