Jquery实例教程:制作网页下拉菜单


菜单
效果图: 
 
要点说明:1.简单合理的html框架布局(只显示其中一个列表框架)


<div>
    <ul>
      <li>
        <a href="#">css</a>
      <ul>
          <li><a>样式表1</a></li>     
          <li><a>样式表2</a></li> 
          <li><a>样式表3</a></li> 
          <li><a>样式表4</a></li> 
      </ul>
    </li>
</div>
2.css用父类继承而不是后代(div>ul而不能用div ul)
<style type="text/css">
    ul{
    margin:0;
    padding:0;
    list-style:none;
    }
    div{
        margin-bottom:10px;
        width:400px;
        height:30px;
        background:#333;
        }
    div>ul>li{
        float:left;
        margin:0 5px;
        width:100px;
        text-align:center;
        line-height:30px;
        }
    div>ul>li a{
        display:block;
        color:#fff;
        text-decoration:none;
        }
    div>ul>li a:hover{
        text-decoration:underline;
        }
    div>ul>li>ul{
        display:none;
        }
</style>
3.jquery
  A.show()显示隐藏元素
  B.hide()隐藏显示元素
  C.show()和hide()显示/隐藏元素是通过同时改变宽度,高度和不透明度实现的
<script type="text/javascript">
    $(function(){
        $("div>ul>li").hover(function(){
            $(this).children("ul").show(200).css({"background":"#1376c9","display":"block"});                                                           
        },function(){
            $(this).children("ul").hide(200);
      });
    });
</script>



相关阅读:
XHTML入门学习教程:简单网页制作
Win2003 Server DHCP服务器安装图解(下)
NBear安装配置
木子李教程之CSS全攻略
几款Linux平台下IDS入侵检测工具推荐
IE和Firefox在JavaScript语法上不同的7个方面
PHP正则表达式提取超链接及其标题
恢复已删除的Linux文件
Linux禁止单用户模式(single)来增强系统安全
没有发现 PHP 的扩展设置mbstring
javascript 控制弹出窗口
DIV层之拖动、关闭、打开效果代码
使用织梦网站管理(DEDECMS)架设网站全面分析
用YUM升级CentOS下的PHP和MySQL
快速导航

Copyright © 2016 phpStudy | 皖ICP备18014864号-4