CSS不规则弹出式菜单要点

发布时间:2020-05-14 发布网站:脚本之家
脚本之家收集整理的这篇文章主要介绍了CSS不规则弹出式菜单要点脚本之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

《CSS不规则弹出式菜单要点》要点:
本文介绍了CSS不规则弹出式菜单要点,希望对您有用。如果有疑问,可以联系我们。

所谓的不规则弹出式菜单是什么样的?如图,菜单和子菜单大小不一致,和简单的下拉菜单不太一样。


一、样式:

CSS不规则弹出式菜单要点1

 

要点:确保鼠标移出“素材”后,下面的子菜单不会消失。只有移出全部白色区域后才消失。


二、代码:

1、HTML部分:

<div class="nav-mo">
  <div class="nav-lis">
   <a href="http://www.jb51.cc/sc/" class="n-c">素材</a>
   <ul>
      <li><a href="http://www.jb51.cc/1/">PSD素材</a></li>
      <li><a href="http://www.jb51.cc/2/">矢量素材</a></li>
      <li><a href="http://www.jb51.cc/3/">网页特效</a></li>
   </ul>
   <br clear="both" />
  </div>
 </div>


2、CSS部分

<style>
body{font: 12px/1.5 '宋体',Arial,Helvetica,sans-serif;}
 * { word-wrap: break-word; }
 ul,li{list-style:none;margin:0;padding:0;}
 .nav-mo a.n-c{
    position:relative;top:-5px;z-index:5;
    color:#4d4d4d;padding:5px 0;
    display:inline-block;/*或block*/
    font-weight:bold;font-family:"微软雅黑",Microsoft YaHei;
    padding:6px 8px 6px 8px;
    border:1px solid #fff;border-bottom:0px;background-color:#FFFFFF;
 }
 /* 重点 */
 .nav-mo .nav-lis {position:relative;z-index:20;margin:0 5px;*margin:0 2px;height:24px;}
 .nav-mo .nav-lis:hover a.n-c, .nav-mo .nav-lis a.n-c:hover, .nav-mo .hover a.n-c {
    color:#f60;text-decoration:none;border-color:#bababa;
    -webkit-box-shadow:1px -1px 1px #e0e0e0;-moz-box-shadow:1px -1px 1px #e0e0e0; box-shadow:1px -1px 1px #e0e0e0;
    border:1px solid #bababa; z-index:20;border-bottom:0px;padding-bottom:7px;
 } /*和JQ配合关键:.hover*/
 .nav-mo .nav-lis ul{
    position:absolute; top:26px;left:0px; z-index:10;display:none;
    background:#fff;color:#666;border:1px solid #bababa;padding:3px;font-size:12px;
    -webkit-box-shadow:1px 1px 1px #e0e0e0;-moz-box-shadow:1px 1px 1px #e0e0e0;
    width:220px;
 }
 .nav-mo .nav-lis:hover ul, .nav-mo .hover ul{display:block;line-height:24px;z-index:10;} /*和JQ配合关键:.hover*/
 
 /*下面对弹出菜单栏中的样式设计,不重要*/
 .nav-mo .nav-lis li{width:50%;float:left;}
 .nav-mo .nav-lis li a{color:#666;display:block;padding:2px 7px;font-size:13px;}
 .nav-mo .nav-lis li a:hover{color:#333;background-color:#f5f5f5;text-decoration:none;display:block;}
 .nav-mo .nav-lis li{padding:0px} 
 
 </style>



注意:.nav-mo .nav-lis:hover a.n-c,使菜单在鼠标移到弹出的子菜单上后,顶部菜单栏仍是hover状态而不会消失。但为了不同浏览器的兼容性,特别是IE,强烈建议使用JS添加hover样式。

 

要点说明:

1、如下布局结构。

2、.nav-mo .nav-lis 要进行相对定位,.nav-mo 的作用就是提供给.nav-lis做相对定位使用:

position:relative;z-index:20; 然后UL做成绝对定位position:absolute;top:26px;left:2px;z-index:10; 记得UL的z-index要低。

       菜单项的a块的底部和UL上方要刚好对接。

3、关键:设置.hover下的菜单项a链接和ul样式。JS将调用它。
重点:.nav-mo .hover a.n-c{...} 和 .nav-mo .hover ul{...},这样当JQ激活.nav-mo .nav-lis的hover样式后,其下的a和ul也将显示。

4、用JQ对div.nav-lis进行hover设置(也可以不用JQ,参下文的CSS说明,但兼容性可能不是太好):

       $(".nav-mo .nav-lis").hover(function(){

                     $(this).addClass("hover");

              },function(){

                     $(this).removeClass("hover"); 

              }

       );

其实CSS做到位后,可以不依赖JS,但在低级浏览器上的兼容性不好。所以为了不同浏览器的兼容性,特别是IE,建议使用JS添加hover样式。


【技术要点】用包含菜单项的链接和弹出菜单的“外层标签div或li”等的.hover样式控制激活时菜单项和弹出菜单处于hover风格。如这里的<div>外层的div ,而最外层的.nav-mo是用于给.nav-lis提供相对定位作用。

总结

以上是脚本之家为你收集整理的CSS不规则弹出式菜单要点全部内容,希望文章能够帮你解决CSS不规则弹出式菜单要点所遇到的程序开发问题。

如果觉得脚本之家网站内容还不错,欢迎将脚本之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您喜欢交流学习经验,点击链接加入脚本之家官方QQ群:1065694478