• [置顶] 后台导航栏下拉列表 css+div 样式代码 及示例下载(灾情分享网)


    样式效果图====================================================



    页面代码======================================================

    <div class="left_box">
                            <div class="divNav">
                                <ul id="nav" class="container">
                                    <%--<li class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="green">Kiwis <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="#" onclick="$('.button a').eq(2).click();return false;">Open Grapes Section</a></li>
                                                    <li><a href="#" onclick="$('.dropdown').slideUp('slow');return false;">Close This Section</a></li>
                                                    <li><a href="#">Read on Wikipedia</a></li>
                                                    <li><a href="#">Flickr Stream</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>--%>
                                    <li class="menu">
                                        <ul>
                                            <li class="button"><a href="../default.aspx" class="blue" target="_parent">首页<span></span></a>
                                            </li>
                                            <li class="dropdown">
                                                <ul>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li id="nav_Disaster" class="button"><a href="#" class="green">灾情管理<span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/Disaster/MyAuditDisastersList.aspx" target="main">灾情列表</a></li>
                                                    <li><a href="../admin/Disaster/MyNoAuditDisastersList.aspx" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li id="nav_Video" class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="orange">视频管理 <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/Video/MyAuditVideosList.aspx" target="main">视频列表</a></li>
                                                    <li><a href="../admin/Video/MyNoAuditVideosList.aspx" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li id="nav_Picture" class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="blue">图片管理 <span></span></a>
                                                <li class="dropdown">
                                                    <ul>
                                                        <li><a href="../admin/Pics/MyAuditPicsList.aspx" target="main">图片列表</a></li>
                                                        <li><a href="../admin/Pics/MyNoAuditPicsList.aspx" target="main">未审核列表</a></li>
                                                    </ul>
                                                </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li class="button" id="nav_News"><a href="#" class="red">新闻管理 <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/Text/MyAuditTextsList.aspx" target="main">新闻列表</a></li>
                                                    <li><a href="../admin/Text/MyNoAuditTextsList.aspx" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="green">需求管理 <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/demand/MyAuditDemandsList.aspx" target="main">需求列表</a></li>
                                                    <li><a href="../admin/demand/MyNoAuditDemandsList.aspx" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="orange">灾情类别管理 <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/DisasterCategory/list.aspx?category=audit" target="main">灾情类别列表</a></li>
                                                    <li><a href="../admin/DisasterCategory/list.aspx?category=noaudit" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="blue">需求类别管理<span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/DemandCategory/list.aspx?category=audit" target="main">需求类别列表</a></li>
                                                    <li><a href="../admin/DemandCategory/list.aspx?category=noaudit" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li class="button" id="nav_Android"><a href="#" class="red">Android下载管理 <span></span>
                                            </a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/" target="main">Android下载列表</a></li>
                                                    <li><a href="../admin/" target="main"></a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li id="nav_Iphone" class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="green">iPhone下载管理 <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="" target="main">iPhone下载列表</a></li>
                                                    <li><a href="" target="main"></a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                    <li class="menu">
                                        <ul>
                                            <li class="button"><a href="#" class="blue">服务器管理 <span></span></a></li>
                                            <li class="dropdown">
                                                <ul>
                                                    <li><a href="../admin/Server/list.aspx?category=audit" target="main">服务器列表</a></li>
                                                    <li><a href="../admin/Server/list.aspx?category=noaudit" target="main">未审核列表</a></li>
                                                </ul>
                                            </li>
                                        </ul>
                                    </li>
                                </ul>
                            </div>

    样式代码 ==========================================================

    /* start===================*/

    ul{margin:0;padding:0;}

    ul.container{/* The topmost UL */85%;}
    li{list-style:none;text-align:left;}
    li.menu{/* The main list elements */padding:5px 0;100%;}

    li.button a{/* The section titles */display:block;font-family:BPreplay,Arial,Helvetica,sans-serif;font-size:20px;height:25px;overflow:hidden;padding:10px 20px 0;position:relative;85%;}

    li.button a:hover{/* Removing the inherited underline from the titles */text-decoration:none;}

    li.button a span{/* This span acts as the right part of the section's background */height:30px;position:absolute;right:0;top:0;4px;display:block;}

    /* Setting up different styles for each section color */
    li.button a.blue{background:url(../images/blue.png) repeat-x top left; color:#074384;}
    li.button a.blue span{ background:url(../images/blue.png) repeat-x top right;}

    li.button a.green{background:url(../images/green.png) repeat-x top left; color:#436800;}
    li.button a.green span{ background:url(../images/green.png) repeat-x top right;}

    li.button a.orange{background:url(../images/orange.png) repeat-x top left; color:#882e02;}
    li.button a.orange span{ background:url(../images/orange.png) repeat-x top right;}

    li.button a.red{background:url(../images/red.png) repeat-x top left; color:#641603;}
    li.button a.red span{ background:url(../images/red.png) repeat-x top right;}

    /* The hover effects */
    li.button a:hover{ background-position:bottom left;}
    li.button a:hover span{ background-position:bottom right;}
    .dropdown{/* The expandable lists */display:none;padding-top:5px;100%;}
    .dropdown li{/* Each element in the expandable list */background-color:#373128; height:20px; font-size:18px;border:1px solid #40392C;color:#CCCCCC;margin:5px 0;padding:4px 18px;}
    /* The styles below are only necessary for the demo page */
    .dropdown li a{display:block;}
    h1{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:36px;font-weight:normal;margin-bottom:15px;}
    h2{font-family:"Myriad Pro",Arial,Helvetica,sans-serif;font-size:12px;font-weight:normal;padding-right:140px;right:0;text-align:right;text-transform:uppercase;top:15px;}
    .clear{clear:both;}
    #main{/* The main container */margin:15px auto;text-align:center;920px;position:relative;}
    a, a:visited {color:#0196e3;text-decoration:none;outline:none;}
    a:hover{text-decoration:underline;}
    p{/* The tut info on the bottom of the page */padding:10px;text-align:center;}
    /* end===================*/===========


    此外还需要引入几个Jquary文件

    地址:http://download.csdn.net/detail/wsq724439564/5165651

  • 相关阅读:
    Javascript 面向对象编程
    __dirname与__filename
    解决动画播放完后恢复到初始状态的问题
    基于jQuery滚动加载页面内容效果的插件封装
    JQuery 方法
    CSS 尺寸介绍
    原生JS组件编写,构造函数封装步骤
    面试题原型链
    基础面试题——什么是盒子模型
    数组去重方法
  • 原文地址:https://www.cnblogs.com/wsq724439564/p/3258205.html
Copyright © 2020-2023  润新知