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

 

 

 

 

 

 

 

filing cabinet file cabinet 新恩嘉義神經內科 新恩嘉義神經內科

 

 
 
網頁設計+創意=100%網站 arrow 網頁設計教學與製作技巧 arrow css網頁設計教學與網頁製作技巧. arrow 網頁設計教學 css menu 橫式下拉含圖選單   
網頁設計教學 css menu 橫式下拉含圖選單 E-mail
2009/02/03, 週二

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

網頁製作教學 css menu 橫式下拉含圖選單

一個不錯的網頁製作 css menu 下拉式選單教學,選單置頂,下方放一張圖,選單可延伸至三層,當然如果會改的話也可繼續製作延伸。仍然是定義一個css在<head>與</head>之間。定義名稱為#nav,當然定義的css還蠻多的。有些css它的定義已經完全定義好了,所以要改的地方可能是選單的底色,或者是選單的文字部份,這些應該是比較重要的部份。網頁設計教學範例:第一行 #outerContainer {background:#4b4d3f; width:750px; height:30px;},就是選單背景的色彩,修改background:#4b4d3f;的色彩即可,甚至可以修改選單的顏色部份寬高等等,而網頁設計教學範例:第四行就是修改文字的字體或大小。#nav ul {padding:0; margin:0; list-style:none; font: 11px arial, verdana, sans-serif;。而<body>與</body>之間,則是css選單的位置,它是運用<li>的子選單延伸,呈現多層次的選單延伸。 而下方那張圖則是在<head>與</head>之間的<img src="01.jpg" alt="" title="" /><br class="clear" />裡。

教學範例展示 >>

01_2.jpg


以下貼於<head>與</head>之間:

<style type="text/css">
#outerContainer {background:#4b4d3f; width:750px; height:30px;}
#menuContainer {position:relative; float:left; left:50%;}

#nav,
#nav ul {padding:0; margin:0; list-style:none; font: 11px arial, verdana, sans-serif; background:url(transparent.gif); position:relative; z-index:100;}
#nav {height:30px; float:left; padding:0; background:#4b4d3f; position:relative; right:50%;}

#nav table {border-collapse:collapse;}
#nav li {float:left;}
#nav li li {float:none;}
/* a hack for IE5.x and IE6 */
#nav li a li {float:left;}

#nav li a {display:block; float:left; color:#fff; height:30px; padding:0 20px 0 10px; line-height:30px; text-decoration:none; white-space:nowrap; font-weight:bold;}
#nav li li a {height:25px; line-height:25px; float:none;}

#nav li:hover {position:relative; z-index:100; background:url(transparent.gif);}
#nav a:hover {position:relative; z-index:100; color:#fc0; border:0;}
#nav li:hover > a {color:#fc0;}

#nav :hover  ul {left:0; top:30px; z-index:300;}
#nav a:hover ul {left:-1px;}

#nav ul {position:absolute; left:-9999px; top:-9999px;}

/* it could have been this simple if all browsers understood */
/* show next level */
#nav li:hover li:hover > ul {left:0; margin-left:100%; top:0;}
/* keep further levels hidden */
#nav li:hover > ul ul {position:absolute; left:-9999px; top:-9999px; width:auto;}
/* show path followed */
#nav li:hover li:hover > a {color:#fc0;}

#nav li a:hover ul li a:hover {color:#fc0;}

/* but IE5.x and IE6 need this lot to style the flyouts*/
/* show next level */
#nav a:hover a:hover ul,
#nav a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover ul,
#nav a:hover a:hover a:hover a:hover a:hover ul
{left:100%; top:0;}

/* keep further levels hidden */
#nav a:hover ul ul,
#nav a:hover a:hover ul ul,
#nav a:hover a:hover a:hover ul ul,
#nav a:hover a:hover a:hover a:hover ul ul
{position:absolute; left:-9999px; top:-9999px;}
</style>


 以下貼於<body>與</body>之間:

<div id="wrapper">
 <div id="header"><div id="botlink"></div> </div> <div id="showcase"><div id="info">
     <div id="outerContainer">
<div id="menuContainer">

<ul id="nav">
<li><a href="#nogo">Home</a></li>
<li><a href="#nogo">關於我們 &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>

  <li><a href="#nogo">公司延革</a></li>
  <li><a href="#nogo">方向政策</a></li>
  <li><a href="#nogo">未來展望</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">產品介紹 &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
 <li><a href="#nogo">Tripods &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->

  <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><a href="#nogo">Monopods</a></li>
   <li><a href="#nogo">Tripods</a></li>
   <li><a href="#nogo">Adjutable head</a></li>
   <li><a href="#nogo">Fixed</a></li>
   <li><a href="#nogo">Flash mount</a></li>

   <li><a href="#nogo">Floating head</a></li>
  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="#nogo">Films &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
  <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
   <li><a href="#nogo">35mm</a></li>
   <li><a href="#nogo">Color Print</a></li>

   <li><a href="#nogo">Black and White</a></li>
   <li><a href="#nogo">Roll</a></li>
   <li><a href="#nogo">Color Slide</a></li>
  </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
 <li><a href="#nogo">Cameras &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
   <!--[if lte IE 6]><table><tr><td><![endif]--><ul>

   <li><a href="#nogo">Compact &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
    <li><a href="#nogo">Canon</a></li>
    <li><a href="#nogo">Nikon</a></li>
    <li><a href="#nogo">Minolta</a></li>
    <li><a href="#nogo">Pentax</a></li>

    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#nogo">Digital &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
     <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
     <li><a href="#nogo">Canon</a></li>
     <li><a href="#nogo">Nikon &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
       <!--[if lte IE 6]><table><tr><td><![endif]--><ul>

       <li><a href="#nogo">Lenses &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
         <li><a href="#nogo">Standard</a></li>
         <li><a href="#nogo">Telephoto</a></li>
         <li><a href="#nogo">Wide Angle</a></li>
         <li><a href="#nogo">Fish Eye</a></li>

         <li><a href="#nogo">Mirror</a></li>
         <li><a href="#nogo">Macro</a></li>
        </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#nogo">Speedlight</a></li>
       <li><a href="#nogo">Coolpix &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
         <!--[if lte IE 6]><table><tr><td><![endif]--><ul>

         <li><a href="#nogo">Coolpix S10</a></li>
         <li><a href="#nogo">Coolpix L2</a></li>
         <li><a href="#nogo">Coolpix S500</a></li>
         <li><a href="#nogo">Coolpix P5000</a></li>
         <li><a href="#nogo">Coolpix 4600</a></li>
         <li><a href="#nogo">Coolpix S6 Silver</a></li>

         </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       <li><a href="#nogo">D200</a></li>
       <li><a href="#nogo">D80</a></li>
       </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
     </li>
     <li><a href="#nogo">Minolta</a></li>

     <li><a href="#nogo">Pentax</a></li>
     </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   <li><a href="#nogo">SLR &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
    <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
    <li><a href="#nogo">Canon</a></li>
    <li><a href="#nogo">Nikon</a></li>

    <li><a href="#nogo">Minolta</a></li>
    <li><a href="#nogo">Pentax</a></li>
    <li><a href="#nogo">Panasonic</a></li>
    </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
   </li>
   </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
  </li>

 <li><a href="#nogo">Flash</a></li>
 <li><a href="#nogo">Video</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
 </li>
<li><a href="#nogo">FAQs &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  <li><a href="#nogo">Cameras</a></li>

  <li><a href="#nogo">Film types</a></li>
  <li><a href="#nogo">Digital Photography</a></li>
 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">成果展示 &#187;<!--[if gte IE 7]><!--></a><!--<![endif]-->
 <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
  <li><a href="#nogo">研究策略</a></li>
  <li><a href="#nogo">審核定案</a></li>

 </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li><a href="#nogo">連絡我們</a></li>
</ul>
</div>
</div>
<img src="01.jpg" alt="" title="" /><br class="clear" />
</div> </div> <!-- end of showcase -->
<div id="content">
<div id="left_column"></div>
</div> </div>

教學範例展示 >>

最後更新 ( 2009/09/24, 週四 )
< 上一頁   下一頁 >
top_18.jpg
 
 
尚佶網頁設計 2011 © copyright 版權所有.All rights reserved.
 
©2011 Sungie