首页>>导航菜单>>纯CSS的大型下拉菜单,支持放图片在下拉导航里面(2013-09-08)

纯CSS的大型下拉菜单,支持放图片在下拉导航里面

效果非常漂亮，也很实用，小型，中型网站均可使用

纯CSS的大型下拉菜单,支持放图片在下拉导航里面
演示
下载
赞赏支持
立刻微信赞赏支持 关闭

 

XML/HTML Code
  1. <ul id="menu">  
  2.       
  3.     <li><a href="http://www.freejs.net" class="drop">首页</a><!-- Begin Home Item -->  
  4.       
  5.         <div class="dropdown_2columns"><!-- Begin 2 columns container -->  
  6.       
  7.             <div class="col_2">  
  8.                 <h2>欢迎访问</h2>  
  9.             </div>  
  10.       
  11.             <div class="col_2">  
  12.                 <p>本站提供的所有代码均可以正常演示，您可以在demo中看到。</p>               
  13.                 <p>freejs-付费下载Web演示,导航菜单,TAB标签,焦点图,图片特效,分页,表单,收费下载各种网页特效.</p>               
  14.             </div>  
  15.       
  16.             <div class="col_2">  
  17.                 <h2><a href="http://www.freejs.net/biaodan.html">表单演示</a></h2>  
  18.             </div>  
  19.               
  20.             <div class="col_1">  
  21.                 <img src="http://www.freejs.net/images/logo.png" height="47" width="150" alt="freejs首页" />  
  22.             </div>  
  23.               
  24.             <div class="col_1">  
  25.                 <p>支持所有浏览器的大型导航菜单，可以加图片</p>  
  26.             </div>  
  27.             
  28.         </div><!-- End 2 columns container -->  
  29.       
  30.     </li><!-- End Home Item -->  
  31.   
  32.     <li><a href="" class="drop">显示4列</a><!-- Begin 4 columns Item -->  
  33.       
  34.         <div class="dropdown_4columns"><!-- Begin 4 columns container -->  
  35.           
  36.             <div class="col_4">  
  37.                 <h2>This is a heading title</h2>  
  38.             </div>  
  39.               
  40.             <div class="col_1">  
  41.               
  42.                 <h3>分类</h3>  
  43.                 <ul>  
  44.                     <li><a href="http://www.freejs.net/daohangcaidan.html" title="各种下拉菜单,导航,多级菜单,右侧展开,左侧展开">导航菜单</a></li>  
  45.            <li><a href="http://www.freejs.net/tabbiaoqian.html" title="tab标签,选项卡，选卡">TAB标签</a></li>  
  46.            <li><a href="http://www.freejs.net/jiaodiantu.html" title="焦点图,相册,幻灯片">焦点图</a></li>  
  47.            <li><a href="http://www.freejs.net/fenye.html" title="翻页,分页  
  48. 本站演示中的分页数据库结构都一样的">分页</a></li>  
  49.            <li><a href="http://www.freejs.net/biaodan.html" title="表单">表单</a></li>  
  50.            <li><a href="http://www.freejs.net/jquerytupiantexiao.html" title="Jquery图片特效">Jquery图片</a></li>  
  51.            <li><a href="http://www.freejs.net/jquerywenzi.html" title="jquery文字特效,js文字特效">Jquery文字</a></li>  
  52.                 </ul>     
  53.                    
  54.             </div>  
  55.       
  56.             <div class="col_1">  
  57.               
  58.                 <h3>Useful Links</h3>  
  59.                 <ul>  
  60.                     <li><a href="">NetTuts</a></li>  
  61.                     <li><a href="">VectorTuts</a></li>  
  62.                     <li><a href="">PsdTuts</a></li>  
  63.                     <li><a href="">PhotoTuts</a></li>  
  64.                     <li><a href="">ActiveTuts</a></li>  
  65.                 </ul>     
  66.                    
  67.             </div>  
  68.       
  69.             <div class="col_1">  
  70.               
  71.                 <h3>Other Stuff</h3>  
  72.                 <ul>  
  73.                     <li><a href="">FreelanceSwitch</a></li>  
  74.                     <li><a href="">Creattica</a></li>  
  75.                     <li><a href="">WorkAwesome</a></li>  
  76.                     <li><a href="">Mac Apps</a></li>  
  77.                     <li><a href="">Web Apps</a></li>  
  78.                 </ul>     
  79.                    
  80.             </div>  
  81.       
  82.             <div class="col_1">  
  83.               
  84.                 <h3>Misc</h3>  
  85.                 <ul>  
  86.                     <li><a href="">Design</a></li>  
  87.                     <li><a href="">Logo</a></li>  
  88.                     <li><a href="">Flash</a></li>  
  89.                     <li><a href="">Illustration</a></li>  
  90.                     <li><a href="">More...</a></li>  
  91.                 </ul>     
  92.                    
  93.             </div>  
  94.               
  95.         </div><!-- End 4 columns container -->  
  96.       
  97.     </li><!-- End 4 columns Item -->  
  98.   
  99.     <li class="menu_right"><a href="" class="drop">显示在右侧的1列</a>  
  100.       
  101.         <div class="dropdown_1column align_right">  
  102.           
  103.                 <div class="col_1">  
  104.                   
  105.                     <ul class="simple">  
  106.                         <li><a href="http://www.freejs.net/daohangcaidan.html" title="各种下拉菜单,导航,多级菜单,右侧展开,左侧展开">导航菜单</a></li>  
  107.            <li><a href="http://www.freejs.net/tabbiaoqian.html" title="tab标签,选项卡，选卡">TAB标签</a></li>  
  108.            <li><a href="http://www.freejs.net/jiaodiantu.html" title="焦点图,相册,幻灯片">焦点图</a></li>  
  109.            <li><a href="http://www.freejs.net/fenye.html" title="翻页,分页  
  110. 本站演示中的分页数据库结构都一样的">分页</a></li>  
  111.            <li><a href="http://www.freejs.net/biaodan.html" title="表单">表单</a></li>  
  112.            <li><a href="http://www.freejs.net/jquerytupiantexiao.html" title="Jquery图片特效">Jquery图片</a></li>  
  113.            <li><a href="http://www.freejs.net/jquerywenzi.html" title="jquery文字特效,js文字特效">Jquery文字</a></li>  
  114.                     </ul>     
  115.                        
  116.                 </div>  
  117.                   
  118.         </div>  
  119.           
  120.     </li>  
  121.   
  122.     <li class="menu_right"><a href="" class="drop">3 columns</a><!-- Begin 3 columns Item -->  
  123.       
  124.         <div class="dropdown_3columns align_right"><!-- Begin 3 columns container -->  
  125.               
  126.             <div class="col_3">  
  127.                 <h2>Lists in Boxes</h2>  
  128.             </div>  
  129.               
  130.             <div class="col_1">  
  131.       
  132.                 <ul class="greybox">  
  133.                     <li><a href="">FreelanceSwitch</a></li>  
  134.                     <li><a href="">Creattica</a></li>  
  135.   
  136.                 </ul>     
  137.       
  138.             </div>  
  139.               
  140.             <div class="col_1">  
  141.       
  142.                 <ul class="greybox">  
  143.                     <li><a href="">ThemeForest</a></li>  
  144.                     <li><a href="">GraphicRiver</a></li>  
  145.   
  146.                 </ul>     
  147.       
  148.             </div>  
  149.               
  150.             <div class="col_1">  
  151.       
  152.                 <ul class="greybox">  
  153.                     <li><a href="">Design</a></li>  
  154.                     <li><a href="">Logo</a></li>  
  155.   
  156.                 </ul>     
  157.       
  158.             </div>  
  159.               
  160.             <div class="col_3">  
  161.                 <h2>Here are some image examples</h2>  
  162.             </div>  
  163.               
  164.             <div class="col_3">  
  165.                 <img src="../erlianhaote.png" width="70" height="70" class="img_left imgshadow" alt="" />  
  166.                 <p>二连浩特</p>  
  167.       
  168.                 <img src="../mohe.png" width="70" height="70" class="img_left imgshadow" alt="" />  
  169.                 <p>纯CSS的大型下拉菜单,支持放图片在下来导航里面</p>  
  170.             </div>  
  171.           
  172.         </div><!-- End 3 columns container -->  
  173.           
  174.     </li><!-- End 3 columns Item -->  
  175. </ul>  

 既然是css导航，css文件当然必不可少

 

CSS Code
  1. body, ul, li {  
  2.     font-size:14px;   
  3.     font-family:Arial, Helvetica, sans-serif;  
  4.     line-height:21px;  
  5.     text-align:left;  
  6. }  
  7.   
  8. #menu {  
  9.     list-style:none;  
  10.     width:740px;  
  11.     margin:30px auto 0px auto;  
  12.     height:43px;  
  13.     padding:0px 20px 0px 20px;  
  14.   
  15.     /* Rounded Corners */  
  16.       
  17.     -moz-border-radius: 10px;  
  18.     -webkit-border-radius: 10px;  
  19.     border-radius: 10px;  
  20.   
  21.     /* Background color and gradients */  
  22.       
  23.     background: #014464;  
  24.     background: -moz-linear-gradient(top, #0272a7, #013953);  
  25.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#0272a7), to(#013953));  
  26.       
  27.     /* Borders */  
  28.       
  29.     border: 1px solid #002232;  
  30.   
  31.     -moz-box-shadow:inset 0px 0px 1px #edf9ff;  
  32.     -webkit-box-shadow:inset 0px 0px 1px #edf9ff;  
  33.     box-shadow:inset 0px 0px 1px #edf9ff;  
  34. }  
  35.   
  36. #menu li {  
  37.     float:left;  
  38.     display:block;  
  39.     text-align:center;  
  40.     position:relative;  
  41.     padding: 4px 10px 4px 10px;  
  42.     margin-right:30px;  
  43.     margin-top:7px;  
  44.     border:none;  
  45. }  
  46.   
  47. #menu li:hover {  
  48.     border: 1px solid #777777;  
  49.     padding: 4px 9px 4px 9px;  
  50.       
  51.     /* Background color and gradients */  
  52.       
  53.     background: #F4F4F4;  
  54.     background: -moz-linear-gradient(top, #F4F4F4, #EEEEEE);  
  55.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#F4F4F4), to(#EEEEEE));  
  56.       
  57.     /* Rounded corners */  
  58.       
  59.     -moz-border-radius: 5px 5px 0px 0px;  
  60.     -webkit-border-radius: 5px 5px 0px 0px;  
  61.     border-radius: 5px 5px 0px 0px;  
  62. }  
  63.   
  64. #menu li a {  
  65.     font-family:Arial, Helvetica, sans-serif;  
  66.     font-size:14px;   
  67.     color: #EEEEEE;  
  68.     display:block;  
  69.     outline:0;  
  70.     text-decoration:none;  
  71.     text-shadow: 1px 1px 1px #000;  
  72. }  
  73.   
  74. #menu li:hover a {  
  75.     color:#161616;  
  76.     text-shadow: 1px 1px 1px #ffffff;  
  77. }  
  78. #menu li .drop {  
  79.     padding-right:21px;  
  80.     background:url("img/drop.png") no-repeat rightright 8px;  
  81. }  
  82. #menu li:hover .drop {  
  83.     background:url("img/drop.png") no-repeat rightright 7px;  
  84. }  
  85.   
  86. .dropdown_1column,   
  87. .dropdown_2columns,   
  88. .dropdown_3columns,   
  89. .dropdown_4columns,  
  90. .dropdown_5columns {  
  91.     margin:4px auto;  
  92.     float:left;  
  93.     position:absolute;  
  94.     left:-999em; /* Hides the drop down */  
  95.     text-align:left;  
  96.     padding:10px 5px 10px 5px;  
  97.     border:1px solid #777777;  
  98.     border-top:none;  
  99.       
  100.     /* Gradient background */  
  101.     background:#F4F4F4;  
  102.     background: -moz-linear-gradient(top, #EEEEEE, #BBBBBB);  
  103.     background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#EEEEEE), to(#BBBBBB));  
  104.   
  105.     /* Rounded Corners */  
  106.     -moz-border-radius: 0px 5px 5px 5px;  
  107.     -webkit-border-radius: 0px 5px 5px 5px;  
  108.     border-radius: 0px 5px 5px 5px;  
  109. }  
  110.   
  111. .dropdown_1column {width: 140px;}  
  112. .dropdown_2columns {width: 280px;}  
  113. .dropdown_3columns {width: 420px;}  
  114. .dropdown_4columns {width: 560px;}  
  115. .dropdown_5columns {width: 700px;}  
  116.   
  117. #menu li:hover .dropdown_1column,   
  118. #menu li:hover .dropdown_2columns,   
  119. #menu li:hover .dropdown_3columns,  
  120. #menu li:hover .dropdown_4columns,  
  121. #menu li:hover .dropdown_5columns {  
  122.     left:-1px;  
  123.     top:auto;  
  124. }  
  125.   
  126. .col_1,  
  127. .col_2,  
  128. .col_3,  
  129. .col_4,  
  130. .col_5 {  
  131.     display:inline;  
  132.     float: left;  
  133.     position: relative;  
  134.     margin-left: 5px;  
  135.     margin-right: 5px;  
  136. }  
  137. .col_1 {width:130px;}  
  138. .col_2 {width:270px;}  
  139. .col_3 {width:410px;}  
  140. .col_4 {width:550px;}  
  141. .col_5 {width:690px;}  
  142.   
  143. #menu .menu_right {  
  144.     float:rightright;  
  145.     margin-right:0px;  
  146. }  
  147. #menu li .align_right {  
  148.     /* Rounded Corners */  
  149.     -moz-border-radius: 5px 0px 5px 5px;  
  150.     -webkit-border-radius: 5px 0px 5px 5px;  
  151.     border-radius: 5px 0px 5px 5px;  
  152. }  
  153.   
  154. #menu li:hover .align_right {  
  155.     left:auto;  
  156.     rightright:-1px;  
  157.     top:auto;  
  158. }  
  159.   
  160. #menu p, #menu h2, #menu h3, #menu ul li {  
  161.     font-family:Arial, Helvetica, sans-serif;  
  162.     line-height:21px;  
  163.     font-size:12px;  
  164.     text-align:left;  
  165.     text-shadow: 1px 1px 1px #FFFFFF;  
  166. }  
  167. #menu h2 {  
  168.     font-size:21px;  
  169.     font-weight:400;  
  170.     letter-spacing:-1px;  
  171.     margin:7px 0 14px 0;  
  172.     padding-bottom:14px;  
  173.     border-bottom:1px solid #666666;  
  174. }  
  175. #menu h3 {  
  176.     font-size:14px;  
  177.     margin:7px 0 14px 0;  
  178.     padding-bottom:7px;  
  179.     border-bottom:1px solid #888888;  
  180. }  
  181. #menu p {  
  182.     line-height:18px;  
  183.     margin:0 0 10px 0;  
  184. }  
  185.   
  186. #menu li:hover div a {  
  187.     font-size:12px;  
  188.     color:#015b86;  
  189. }  
  190. #menu li:hover div a:hover {  
  191.     color:#029feb;  
  192. }  
  193.   
  194.   
  195. .strong {  
  196.     font-weight:bold;  
  197. }  
  198. .italic {  
  199.     font-style:italic;  
  200. }  
  201.   
  202. .imgshadow { /* Better style on light background */  
  203.     background:#FFFFFF;  
  204.     padding:4px;  
  205.     border:1px solid #777777;  
  206.     margin-top:5px;  
  207.     -moz-box-shadow:0px 0px 5px #666666;  
  208.     -webkit-box-shadow:0px 0px 5px #666666;  
  209.     box-shadow:0px 0px 5px #666666;  
  210. }  
  211. .img_left { /* Image sticks to the left */  
  212.     width:auto;  
  213.     float:left;  
  214.     margin:5px 15px 5px 5px;  
  215. }  
  216.   
  217. #menu li .black_box {  
  218.     background-color:#333333;  
  219.     color: #eeeeee;  
  220.     text-shadow: 1px 1px 1px #000;  
  221.     padding:4px 6px 4px 6px;  
  222.   
  223.     /* Rounded Corners */  
  224.     -moz-border-radius: 5px;  
  225.     -webkit-border-radius: 5px;  
  226.     border-radius: 5px;  
  227.   
  228.     /* Shadow */  
  229.     -webkit-box-shadow:inset 0 0 3px #000000;  
  230.     -moz-box-shadow:inset 0 0 3px #000000;  
  231.     box-shadow:inset 0 0 3px #000000;  
  232. }  
  233.   
  234. #menu li ul {  
  235.     list-style:none;  
  236.     padding:0;  
  237.     margin:0 0 12px 0;  
  238. }  
  239. #menu li ul li {  
  240.     font-size:12px;  
  241.     line-height:24px;  
  242.     position:relative;  
  243.     text-shadow: 1px 1px 1px #ffffff;  
  244.     padding:0;  
  245.     margin:0;  
  246.     float:none;  
  247.     text-align:left;  
  248.     width:130px;  
  249. }  
  250. #menu li ul li:hover {  
  251.     background:none;  
  252.     border:none;  
  253.     padding:0;  
  254.     margin:0;  
  255. }  
  256.   
  257. #menu li .greybox li {  
  258.     background:#F4F4F4;  
  259.     border:1px solid #bbbbbb;  
  260.     margin:0px 0px 4px 0px;  
  261.     padding:4px 6px 4px 6px;  
  262.     width:116px;  
  263.   
  264.     /* Rounded Corners */  
  265.     -moz-border-radius: 5px;  
  266.     -webkit-border-radius: 5px;  
  267.     -khtml-border-radius: 5px;  
  268.     border-radius: 5px;  
  269. }  
  270. #menu li .greybox li:hover {  
  271.     background:#ffffff;  
  272.     border:1px solid #aaaaaa;  
  273.     padding:4px 6px 4px 6px;  
  274.     margin:0px 0px 4px 0px;  
  275. }  

原文地址:http://www.freejs.net/article_daohangcaidan_27.html