导航 | Gschool

导航栏一般位于页面的头部区域，排成一行水平导航按钮，起着链接系统各个页面的作用，能够让用户快速的找到所要到达的区域。本系统有四级导航，分别是：页眉位置的一级下拉框导航、头部的二级横向导航、左列的三级纵向导航、左列纵向导航的四级展开子导航。

样例

css配置

#header .common-header .right .pull-down{width:90px;text-align:center;background:transparent url(../images/ui/visual/pull-down.png) no-repeat scroll 0 0px;height:27px;}

.pull-down .platformselect option{color:#7f807e}

.pull-down select{color:#7f807e;border:1px solid #eaeaea;width:90px;}

说明

宽度90像素；文字居中显示；背景样pull-down.png图片，高度27像素

下拉栏里的字体颜色#7f807e；

下拉框里的字体颜色#7f807e；框描边1像素、实线、颜色#eaeaea;

横向导航

css配置

#header .nav .nav-right{float:right;padding-right:8%;}

#header .nav .nav-right li{float:left;line-height:70px;margin:0px 15px;}

#header .nav .nav-right li a{color:#8b8c8a;}

#header .nav .nav-right .on{text-align:center;border-bottom:2px solid #35a0e7;color:#35a0e7;height:68px;}

说明

靠右浮动；距离右边8%；

单个菜单靠左浮动，即不换行；字行高70像素；各个菜单的左右距离15像素；

链接字体颜色#8b8c8a;

当前选中菜单字体居中显示；底部描边2像素、实线、颜色#35a0e7;字体颜色#35a0e7；高度71像素；

纵向导航

css配置

#main .main-left .headline{font-size:14px;color:#fff;text-align:center;line-height:38px;height:38px;margin-bottom:15px;border-radius:4px;background-color:#35a0e7;}

#main .main-left .sidebar-menu .menu-two{border-bottom:1px solid #e8e8e7;color:#7f807e;font-size:12px;line-height:30px;padding-left:15px;_padding-left:5px;*padding-left:5px;}

说明

字体大小14像素；颜色#fff;字体居中显示；行高38像素；距离下边15像素；圆角4像素；背景颜色#35a0e7;

底部描边1像素、实线、颜色e8e8e8;字体颜色#7f807e;字体大小12像素；行高30像素；距离左边15像素；IE6、IE7距离左边5像素；

展开子导航

css配置

#main .main-left .sidebar-menu .menu-on{border-bottom:1px solid #e8e8e7;color:#7f807e;font-size:12px;line-height:30px;background:transparent url(../images/ui/visual/minus.png) no-repeat scroll 0 0px;padding-left:15px;_padding-left:5px;*padding-left:5px;}

#main .main-left .sidebar-menu .treeview-menu{padding:10px 0px 10px 15px;_padding:10px 0px 10px 5px;*padding:10px 0px 10px 5px;}

#main .main-left .sidebar-menu .treeview-menu li{border-bottom:0px;line-height:25px;}

#main .main-left .sidebar-menu .treeview-menu li a{font-size:12px;color:#7f807e;}

说明

底部描边1像素、实线、颜色e8e8e8;字体颜色#7f807e;字体大小12像素；行高30像素；距离左边15像素；IE6、IE7距离左边5像素；

展开目录内边距上10像素、下10像素；

展开目录底部描边0像素；行高25像素；

展开目录文字大小12像素；颜色#7f807e；