CSS3制做酷炫的往下拉菜单及弹起式选单的案例共

日期:2021-03-04 类型:科技新闻 

关键词:建站平台有哪些,如何建设网站,免费自助建站,如何建立一个网站,网站建站的

往下拉菜单
先立即看来实际效果是如何:

当电脑鼠标移到选单以后,正下方展会开并有其它表明內容,我这边是把进行的部分再加照片內容,让它有其它不一样的转变。由于这样的姿势就像人家庙会时会有舞狮从嘴里丢下贺联1样,因此我才取名字为"贺联式选单"。

这样的实际效果实际上只必须 HTML 及 CSS 相互配合就可以做出来了,大家先看来 HTML 的部分:
检视初始码 HTML

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <ul>  
  3.   <li>  
  4.    <a class="t1" href="#">梅干桑   
  5.     <div>自身详细介绍</div>  
  6.    </a>  
  7.   </li>  
  8.   <li>  
  9.    <a class="t2" href="#">Photoshop   
  10.     <div>上课囉!!</div>  
  11.    </a>  
  12.   </li>  
  13.   <li>  
  14.    <a class="t3" href="#">Q & A   
  15.     <div>难题探讨</div>  
  16.    </a>  
  17.   </li>  
  18.   <li>  
  19.    <a class="t4" href="#">男丁格尔</a>  
  20.   </li>  
  21.   <li>  
  22.    <a class="t5" href="#">人才   
  23.     <div>丁丁是人才</div>  
  24.    </a>  
  25.   </li>  
  26.   <li>  
  27.    <a class="t6" href="#">格言   
  28.     <div>好话大伙儿说</div>  
  29.    </a>  
  30.   </li>  
  31.   <li>  
  32.    <a class="t7" href="http://www.wowgame.tw">WOWGame</a>  
  33.   </li>  
  34.  </ul>  
  35. </body>  

应用 UL 及 LI 来做选单的新项目,每个 LI 中的 A 连结是大家关键的选单內容,而其 DIV 是更进阶的叙述內容,若不必须的话则能够无需加。由于我要让每一个选单都有不一样的情况图,因此还必须帮 A 连结都加1个单独的 class。

随后,我有 7 个 LI 选单新项目,因而我还请梅干帮忙提前准备了 7 张照片(果真還是要技术专业的来)。接着就可以刚开始动手能力写 CSS 囉:
检视初始码 CSS

CSS Code拷贝內容到剪贴板
  1. ul {   
  2.  margin: 0;   
  3.  padding: 0;   
  4.  list-stylenone;   
  5. }   
  6.     
  7. ul li {   
  8.  floatleft;   
  9. }   
  10.     
  11. ul li a {   
  12.  width100px;   
  13.  height50px;   
  14.  displayblock;   
  15.  line-height50px;   
  16.  overflowhidden;   
  17.  text-aligncenter;   
  18.  text-decorationnone;   
  19.  color#fff;   
  20. }   
  21.     
  22. ul li a:hover {   
  23.  height150px;   
  24. }   
  25.     
  26. ul li a div {   
  27.  color#fff;   
  28.  line-height16px;   
  29.  font-weightbold;   
  30.  margin-top73px;   
  31.  padding-top7px;   
  32.  border-top1px dotted #fff;   
  33. }   
  34.     
  35. .t1 { background#08f2d6 url(01.gif); }   
  36. .t2 { background#1209f1 url(02.gif); }   
  37. .t3 { background#a202e2 url(03.gif); }   
  38. .t4 { background#f4e603 url(04.gif); }   
  39. .t5 { background#55df07 url(05.gif); }   
  40. .t6 { background#02a8f3 url(06.gif); }   
  41. .t7 { background#f6025e url(07.gif); }  

这边用到的 CSS 英语的语法全是很基本的,较为必须留意的是大家1刚开始 A 连结的 height 是 50px,因此超出的部分会由于 overflow 为 hidden 的关联而被掩藏起来;此外,当电脑鼠标移到 A 连结后,再附加订了1个 a:hover { } 来把它的 height 撑高,因而本来看不见的情况部分就会呈现出来了。

到这边就全部都进行了,1刚开始访问时就仅有1排的选单

当电脑鼠标移到选项后就会显示信息详细的情况內容

且大家的选单1样是有超连结的作用,是否很趣味呢!假如要让实际效果更优的话,自然還是必须 JavaScript 的相互配合才行唷!

弹起式页签选单
1样先立即看来实际效果是如何:

跟上1个事例不一样的是在此次是电脑鼠标移到选单后会往升高,就象是忽然弹起来1样。

这样的实际效果1样只必须 HTML 及 CSS 就可以做出来了,大家先看来 HTML 的部分:

检视初始码 HTML

XML/HTML Code拷贝內容到剪贴板
  1. <body>  
  2.  <ul id="menu">  
  3.   <li><a href="#" class="home">主页</a></li>  
  4.   <li><a href="#" class="car">买东西车</a></li>  
  5.   <li><a href="#" class="good">强烈推荐产品</a></li>  
  6.   <li><a href="#" class="query">定单查寻</a></li>  
  7.  </ul>  
  8. </body>  

一样是用 UL 及 LI 来做选单的新项目,每个 LI 中的 A 连结是大家关键的选单內容,且以便让每一个选单都有不一样的选单照片,因此还帮 A 连结都加1个单独的 class。

接着刚开始动手能力写 CSS 囉:
检视初始码 CSS

CSS Code拷贝內容到剪贴板
  1. #menu {   
  2.  margin20px 0 0;   
  3.  padding: 0;   
  4.  height62px;  /* 选单照片的高 */  
  5.  list-stylenone;   
  6.  overflowhidden;   
  7.  width432px;  /* 98 * 4 + 5 * 8 */  
  8.  border-bottom1px solid #ccc;   
  9. }   
  10. #menu li {   
  11.  floatleft;   
  12.  padding: 0 5px;   
  13. }   
  14. #menu li a {   
  15.  displayblock;   
  16.  width98px;  /* 选单照片的宽 */  
  17.  height62px;  /* 选单照片的高 */  
  18.  line-height62px/* ie suck */  
  19.  text-indent: -9999px;   
  20.  margin-top31px/* 必须设置为照片宽/2 */  
  21.  background-repeatno-repeat;   
  22. }   
  23. #menu li a:hover {   
  24.  margin-top1px/* 当电脑鼠标移到选单上时... */  
  25. }   
  26. /* 帮每个 A 连结都添加不一样选单照片 */  
  27. .home {background:url(home.gif);}   
  28. .car {background:url(car.gif);}   
  29. .good {background:url(good.gif);}   
  30. .query {background:url(query.gif);}  

这边要留意的是 A 连结的 margin-top 是选单照片高的1半 - 31px,因此超出的部分就不容易显示信息出来;此外,当电脑鼠标移到 A 连结后,再附加订了1个 a:hover { } 来降低它的 margin-top,因而本来看不见的情况部分就会呈现出来了。

到这边就全部都进行了,1刚开始访问时就仅有1排的选单

当电脑鼠标移到选项后就会弹起来囉~~