找回密码
当前位置：前端开发者 > 教程 > 正文

网站前端 用户列表导航栏下拉菜单

2018-07-23 分类：教程 / 面试 阅读(1059) 评论(0)

途牛web前端开发面试题|web前端开发所需要的|前端开发需要哪些工具

html 代码

<!DOCTYPE html>
<head lang=”en”>
    <meta charset=”UTF-8″>
    <title>做web前端开发需要考的证</title>
    <meta charset=”UTF-8″ />
    <meta name=”Keywords” content=”” />
    <meta name=”Description” content=”” />
    <meta http-equiv=”X-UA-Compatible” content=”IE=edge,chrome=1″ />
    <meta name=”viewport” content=”width=device-width,initial-scale=1,user-scalable=no” />
    <meta name=”apple-mobile-web-app-capable” content=”yes” />
    <meta content=”telephone=no” name=”format-detection” />
    <meta content=”email=no” name=”format-detection” />
    <script src=”http://libs.baidu.com/jquery/1.10.2/jquery.min.js”></script>
    <style>
        ul {
            width: 276px;
        }
        li {
            cursor: pointer;
        }
        .menu_demo {
            font-size: 13px;
            content: ” “;
            list-style: none;
            margin: 10% 40%;
        }
        .menu_demo>li {
            padding: 1.2em;
            background-color: #e4644b;
            border-bottom: solid #AEB4BB 1px;
            box-sizing: border-box;
        }
        .menu_demo>li:first-child {
            border-radius: 17px 17px 0 0;
        }
        .menu_demo>li:last-child {
            border-radius: 0 0 17px 17px;
        }
        .menu_child {
            box-sizing: border-box;
            background-color: #74777b;
            display: none;
        }
        .menu_child>li {
            list-style: none;
            margin-left: -10px;
            padding: 2% 0;
        }
        span {
            color: #ffffff;
        }
        .expand-triangle {
            background: url(“/images/gulp/expand-transp.gif”);
            height: 10px;
            width: 276px;
            content: ” “;
            margin-left: -40px;
        }
        .message {
            float: right;
            display: inline;
        }
    </style>
</head>
<body>
    <ul class=”menu_demo”>
        <li>
            <!–<img src=”/images/gulp/user.png” alt=”user”/>–>
            <span>Account</span>
        </li>
        <ul class=”menu_child”>
            <div class=”expand-triangle”></div>
            <li>
                <span>Basics</span>
            </li>
            <li>
                <span>Pictures</span>
            </li>
            <li>
                <span>Go premium</span>
            </li>
        </ul>
        <li>
            <!–<img src=”/images/gulp/envelope.png” alt=”messages”/>–>
            <span>Messages</span>
            <div class=”message”>23</div>
        </li>
        <ul class=”menu_child”>
            <div class=”expand-triangle”></div>
            <li>
                <span>News</span>
            </li>
            <li>
                <span>Sents</span>
            </li>
            <li>
                <span>Trash</span>
            </li>
        </ul>
        <li>
            <!– <img src=”/images/gulp/cog.png” alt=”user”/>–>
            <span>Setting</span>
        </li>
        <ul class=”menu_child”>
            <div class=”expand-triangle”></div>
            <li>
                <span>Language</span>
            </li>
            <li>
                <span>Password</span>
            </li>
            <li>
                <span>Notifications</span>
            </li>
        </ul>
        <li>
            <!–<img src=”/images/gulp/key.png” alt=”messages”/>–>
            <span>Logout</span>
        </li>
    </ul>
    <script>
        var $menu_demo = $(‘.menu_demo’);
        $menu_demo.on(‘click’, ‘li’, function () {
            $(this).next(‘.menu_child’).slideToggle().siblings(‘.menu_child’).slideUp();
        });
    </script>
</body>
</html>

前端开发视频计划ppt|unity前端开发工具|前端常用开发工具推荐

赞(0)
前端开发者 » 网站前端 用户列表导航栏下拉菜单
64K
标签：前端开发者

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论