室內設計
 
尚佶網頁設計主選單
網頁美編設計製作
行動手機‧行動電視
網頁設計
網頁設計
最新訊息:
  網頁設計全球效應
  網頁設計的行銷效用?
設計作品經歷:
  昇華文件櫃有限公司
Shen Hua Filing Cabinet
File Cabinet
  戀戀紅葡萄酒酒莊 酒莊
  美和美吊扇公司
  HCB AUTO TOOLS
  逸通房屋拆除工程 . 房屋拆除 . 台中拆除
  鳳凰企業社
  國立中正大學行銷創意研究中心
  銘輝毛刷有限公司
  大業國中 嘉義市 97 海洋教育計畫
  鳳凰冰涼巾公司
  進泉瓜子
  金鴻勝酒廠
  集順汽車椅套
  嘉義市97教學卓越計畫
  鉅祥工具開發有限公司
更多作品 >>
 

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科 新竹室內設計 台中室內設計 台中室內設計

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學製作技巧 arrow 網頁css樣式分享橫列式下拉式選單語法   
網頁css樣式分享橫列式下拉式選單語法 E-mail
2008/10/31, 週五

網頁製作 css 橫式下拉式選單 

網頁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 。


網頁製作 css 橫式下拉式選單

(一)將以下語法貼於<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 &#187;</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 &#187;</a>
  <ul>
   <li><a href="#01">Sub Level 2a</a></li>
   <li><a href="#01">Sub Level 2b &#187;</a>
    <ul>
     <li><a href="#01">Sub Level 3a</a></li>
     <li><a href="#01">Sub Level 3b &#187;</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 &#187;</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 &#187;</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 則是每個按鈕連結的頁面。

 

最後更新 ( 2010/04/30, 週五 )
< 上一頁
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie