web前端,html+css+jquery实现水平菜单

用到的知识点:

1 列表,常用属性

2 a元素,常用属性

3 显示隐藏

4 jquery点击事件,划过事件

html:

html>

<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>菜单title>
    
    <link href="menu02.css" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="jquery-2.1.4.min.js">script>
    <script type="text/javascript" src="menu02.js">script>

head>
<body>
<ul>
    <li class="hmain">
        <a  class="mya" href="#">菜单1a>
        <ul>
            <li><a href="#">子菜单1a>li>
            <li><a href="#">子菜单2a>li>
        ul>
    li>
    <li class="hmain">
        <a class="mya" href="#">菜单2a>
        <ul>
            <li><a href="#">子菜单1a>li>
            <li><a href="#">子菜单2a>li>
        ul>
    li>
    <li class="hmain">
        <a class="mya" href="#">菜单3a>
        <ul>
            <li><a href="#">子菜单1a>li>
            <li><a href="#">子菜单2a>li>
        ul>
    li>
    <li class="hmain">
        <a class="mya" href="#">菜单4a>
        <ul>
            <li><a href="#">子菜单1a>li>
            <li><a href="#">子菜单2a>li>
        ul>
    li>

ul>
body>
html>
css:
 
  
ul,li{
    /*去掉菜单前面的点*/
    list-style: none;
}
ul{
    /*去掉缩进*/
    padding: 0;
    margin: 0;
}
.mya{
    background-image: url("images/bg.jpg");
    /*规定只能在x轴方向重复,否则会给子菜单也加上背景*/
    background-repeat: repeat-x;
}
a{
    /*去掉a的下划线*/
    text-decoration: none;
    /*居左20*/
    padding-left: 20px;
    /*设置为块级元素*/
    display: block;
    /*宽度80*/
    width: 80px;
    padding-top: 3px;
    padding-bottom: 3px;
}
.hmain a{
    color: darkgreen;
    /*加上向右的箭头图标*/
    /*图标太大覆盖了背景*/
    background-image: url("images/right.jpg" );
    /*不允许重复*/
    background-repeat: no-repeat;

}
.hmain li a{
    color: #000000;
    /*去掉子菜单的向右图标*/
    background-image: none;
    /*居左3px,垂直居中*/
    background-position: 3px center;
}
.hmain ul{
    /*隐藏子菜单*/
    display: none;
}
.hmain{
    float: left;
}
jquery:
/**
 * Created by hao on 2015/9/27.
 */
$(document).ready(function(){
    //.main下面的直接子元素a
    //鼠标划过时的效果
    $(".hmain").hover(function(){
        //自动判断是否展开
        $(this).children("ul").slideToggle();
        changeIcon($(this).children("a"));
    });
});
//    改变右边小图标
function changeIcon(mainNode){
    if(mainNode.css("background-image").indexOf("right.jpg")>=0){
        mainNode.css("background-image","url('images/bottom.jpg')");
    }else{
        mainNode.css("background-image","url('images/right.jpg')");
    }
}
参考视频:
http://www.jikexueyuan.com/course/758.html



你可能感兴趣的:(web前端demo)