导航条 side-bar

原创 2015年07月09日 11:19:56

html

<div class="sidebar-menu">
        <ul class="main-menu ">
            <li class="active">
                <a href="/student/" target=""><i class="fa fa-home icon-setting"></i>li1</a>
            </li>
            <li class="second-menu" id="second-menu1">
                <a href="javascript:void(0)">
                    <i class="fa fa-info  icon-setting"></i>li2
                    <i class="fa fa-caret-down icon-more"></i>
                </a>
                <ul>
                    <li><a href="#" target=""><i class="fa icon-setting">-</i>li2-1</a></li>
                    <li><a href="/student/change-password/" target=""><i class="fa icon-setting">-</i>li2-</a></li>
                </ul>
            </li>

        </ul>
</div>

CSS

body {
    font-family: "Microsoft YaHei";
    color: black;
    min-width: 1000px;
}

.highlight {
    background: #8ECB8D;
}

.sidebar-menu {
    position: absolute;
    width: 256px;
    left: 0;
    top: 0;
    bottom: 0;
    background-color: #66afe9;
}

.header {
    color: white;
    padding-top: 20px;
    height: 60px;

}

.logo {
    padding-left: 40px;
    float: left;
}

.sidebar-hide {
    padding-right: 40px;
    float: right;
}

.main-menu {
    padding: 0;
    margin-top: 20px;

}

.main-menu ul {
    padding-left: 0;
    list-style-type: none;
}

.main-menu li {
    text-align: center;
    padding: 0;
    margin: 0;
    line-height: 56px;
    list-style-type: none;
    position: relative;
    border-bottom: 1px solid #669ed8;
}

.second-menu ul {
    display: none;
}

.second-menu li {
    line-height: 56px;
    border-bottom: 1px solid #669ed8;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    background-color: #669ed8;
}

li a, .header a {
    color: white;
    width: 256px;
}

li:hover {
    color: blue;
    cursor: pointer;
    text-decoration: none;
    /*font-weight: bold;*/
}

li a:hover i {
    color: blue;
    text-decoration: none;
}

.icon-setting {
    padding-right: 20px;
    text-align: center;
    width: 40px;
    color: white;
}

.icon-more {
    position: absolute;
    right: 10px;
    color: white;
    padding-top: 24px;
}

.main-content {
    margin-left: 286px;
    margin-right: 30px;
    margin-top: 0;
}

.main-show {
    /*width: 100%;*/
    min-height: 540px;
    padding-top: 20px;

}

.form-control {
    border-radius: 0;
}

.btn {
    border-radius: 0;
}

option {
}
.footer {
    position: fixed;
    text-align: center;
    left: 286px;
    right: 0;
    bottom: 10px;
    margin-left: auto;
    margin-right: auto;
    color: gray;
}


效果图如下
这里写图片描述

版权声明:本文为博主原创文章,未经博主允许不得转载。

3.5Bootstrap组件篇之导航条

1、默认的导航条 2、表单 3、文本 4、
  • a316212802
  • a316212802
  • 2014年05月05日 10:56
  • 19029

iOS发福利!导航条(Navigation Bar)素材PSD下载

不管是iPhone还是 Android的应用App界面基本上最上方都会有个导航条(Navigation Bar)。于是我决定创建此页面整理收集所有好看的适合在iPhone App应用开发中使用的导航条...
  • hengshujiyi
  • hengshujiyi
  • 2013年04月12日 17:51
  • 1818

结合bootstrap编写右侧点状导航样式

如图,随页面向下滑动,到指定页面后圆点变成白色,也可以通过点击圆点跳转到某个位置。 这是四个部分。 ...
  • youyoufangshou
  • youyoufangshou
  • 2016年11月15日 15:24
  • 1365

iOS发福利!导航条(Navigation Bar)素材PSD下载

不管是iPhone还是 Android的应用App界面基本上最上方都会有个导航条(Navigation Bar)。于是我决定创建此页面整理收集所有好看的适合在iPhone App应用开发中使用的导航条...
  • hengshujiyi
  • hengshujiyi
  • 2013年04月12日 17:51
  • 1818

HTML5 经量级框架 jQuery Mobile Bar(后退,多按钮,controlgroup,horizontal,导航条定义fixed,全屏模式) - 7.5

1.后退 后退   data-add-back-btn="true" 2.多按钮的footer工具栏                         删除           添...
  • menxu_work
  • menxu_work
  • 2013年05月24日 12:59
  • 6980

Android自定义控件实现导航条IndicatorView

先上效果图 这个控件其实算是比较轻量级的,相信不少小伙伴都能做出来。因为项目中遇到了一些特殊的定制要求,所以就自己写了一个,这里放出来。 首先来分析下这个控件的功能: 能够响应左右滑动,并...
  • cc_lova_wxf
  • cc_lova_wxf
  • 2016年06月30日 00:03
  • 1477

横向导航条页面居中的方法

实现图中效果,使横向导航条页面居中
  • Milk_o3o
  • Milk_o3o
  • 2017年07月22日 11:28
  • 375

窗口/框架与导航条设计

1.1弹出窗口控制 001打开新窗口显示广告信息 WindowVar=window.open(url,windowname[,localtion]); 举一反三:开发大型门户网站,商务网站,信息...
  • dyj_121819
  • dyj_121819
  • 2018年01月05日 12:49
  • 48

Android基础控件——TabLayout的使用、仿爱奇艺导航条

TabLayout的使用、仿爱奇艺导航条 学习,学习,学以致用,让基础控件贴近实战效果 TabLayout是Google新推出的Material Design的控件之一,TabLayout的使用必...
  • qq_30379689
  • qq_30379689
  • 2016年12月28日 20:36
  • 2309

js、jquery菜单导航条

漂亮的导航条 20个web2.0导航样式,阿里西西整理收集,alixixi.com 您的位置:阿里西西 > 网页特效 > 广告代码 ...
  • vaecnfeilong
  • vaecnfeilong
  • 2012年12月14日 14:20
  • 2135
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:导航条 side-bar
举报原因:
原因补充:

(最多只允许输入30个字)