标准导航+标准导航菜单

标准导航

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title></title>
    <style type="text/css">
        ul,li{margin:0;padding:0;}
        li{list-style: none;}
        li{float:left;}
        li a{display: block; width:200px; text-align: center;padding: 10px 0;cursor: pointer; text-decoration: none;}
         a:link,a:visited {color:#aaa;}
         a:hover{background-color: #009cec;}
        /*a:link----->a:visited------>a:hover-------->a:active。*/

    </style>
</head>
<body>
<ul>
    <li><a href="#">file</a></li>
    <li><a href="#">edit</a></li>
    <li><a href="#">view</a></li>
    <li><a href="#">navigate</a></li>


</ul>
</body>
</html>

 标准导航菜单

<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <link rel="shortcut icon" href="../img/favicon.ico" type="image/x-icon"/>
    <title>标准导航菜单</title>
<script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript">
        $().ready(function () {
            function test(a){
                $(a).hover(
                function(){
                    var list=a+"-menu";
                    $(list).toggle();
                });
            }
            test("#li1");
            test("#li2");
            test("#li3");
            test("#li4");
            $("#search").bind('focus blur', function () {
                $("#search-menu").toggle();
            });
        });
    </script>
    <style type="text/css">
        body,ul,li,div{margin:0;padding:0;}

        li{list-style: none;}
        .nav > ul > li{float:left;}
        li a{
            display: block;
            width:200px;
            text-align: center;
            padding: 10px 0;
            cursor: pointer;
            text-decoration: none;
            position: relative;
            z-index: 1;
        }
        li > div{
            background-color:#fff;
            display: none;
            position: absolute;
            z-index: 2;
            padding: 10px 0;
            cursor: pointer;
            }
        a:link,a:visited {color:#3c763d}
        a:hover{text-decoration: underline;}
        /*a:link----->a:visited------>a:hover-------->a:active。*/
        .main{background-color: #4cae4c; height: 400px;}

    </style>
</head>
<body>
<div class="nav">
<ul>
    <li id="li1"><a href="#" >file</a>
        <div id="li1-menu">
            <ul>
                <li><a href="#">new</a></li>
                <li><a href="#">open</a></li>
                <li><a href="#">save</a></li>
                <li><a href="#">exit</a></li>
            </ul>
        </div>
    </li>
    <li id="li2"><a href="#" >edit</a>
        <div id="li2-menu" >
            <ul>
                <li><a href="#">copy</a></li>
                <li><a href="#">cut</a></li>
                <li><a href="#">paste</a></li>
                <li><a href="#">delete</a></li>
            </ul>
        </div>
    </li>
    <li  id="li3"><a href="#">view</a>
        <div id="li3-menu">
            <ul>
                <li><a href="#">recent file</a></li>
                <li><a href="#">recent change</a></li>
                <li><a href="#">tool</a></li>
                <li><a href="#">about</a></li>
            </ul>
        </div>
    </li>
    <li id="li4"><a href="#" >navigate</a>
        <div id="li4-menu">
            <ul>
                <li><a href="#">back</a></li>
                <li><a href="#">forward</a></li>
                <li><a href="#">next</a></li>
                <li><a href="#">preview</a></li>
            </ul>
        </div>
    </li>
</ul>
</div>
<div style="clear:both;"></div>
<div class="main">
    <input type="text" name="search" id="search"/>搜索
    <div id="search-menu" style="position: absolute;z-index: 2; display: none;">
        <ul style="border: 1px solid red;">
            <li><a href="#">产品1 </a></li>
            <li><a href="#">产品2 </a></li>
            <li><a href="#">产品3</a></li>
            <li><a href="#">产品4</a></li>
        </ul>
    </div>
</div>
</body>
</html>

 

posted @ 2016-03-25 18:03  gyz418  阅读(182)  评论(0)    收藏  举报