原创作品,允许转载,转载时请务必以超链接形式标明文章
原始出处 、作者信息和本声明。否则将追究法律责任。
http://qingkechina.blog.51cto.com/5552198/1322419
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
|
<!doctype html>
<
html
>
<
head
>
<
title
>medical</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"../../theme/navigation/navigation.css"
>
</
head
>
<
body
>
<
div
class
=
"system_menu"
>
<
div
class
=
"system_menu_wrapper"
>
<
div
class
=
"system_menu_search"
>
<
input
type
=
"text"
id
=
"system_menu_searcher"
>
</
div
>
<
div
class
=
"system_menu_item"
>
<
ul
>
<
li
><
a
href
=
"#"
>下战书</
a
></
li
>
<
li
><
a
href
=
"#"
>首页</
a
></
li
>
<
li
><
a
href
=
"#"
>专家</
a
></
li
>
</
ul
>
</
div
>
<
div
class
=
"system_menu_user"
>
<
div
class
=
"system_menu_user_wrapper"
>
<
a
href
=
"#"
><
i
></
i
><
span
>陈许诺</
span
></
a
>
</
div
>
<
div
class
=
"system_menu_user_setting"
>
<
ul
>
<
li
><
i
class
=
"system_menu_user_setting_home"
></
i
><
span
>主页</
span
></
li
>
<
li
><
i
class
=
"system_menu_user_setting_set"
></
i
><
span
>设置</
span
></
li
>
<
li
><
i
class
=
"system_menu_user_setting_exit"
></
i
><
span
>退出</
span
></
li
>
</
ul
>
</
div
>
</
div
>
</
div
>
</
div
>
</
body
>
</
html
>
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
body, input, a, ul{
font-family
:
'Helvetica Neue'
,
Helvetica
,
Arial
,
Sans-serif
;
font-size
:
14px
;
margin
:
0px
;
padding
:
0px
;
}
/*
* 去掉前面圆点
*/
ul{
list-style
:
none
;
}
/**
* 去掉下划线
*/
a{
text-decoration
:
none
;
}
|
1
2
3
4
5
6
7
8
9
10
11
|
/*
* 搜索框、菜单项、用户项均浮动
*/
.system_menu_search, .system_menu_item{
float
:
left
;
}
.system_menu_user{
float
:
right
;
width
:
120px
;
height
: inherit;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
|
/*
* 斗医系统导航菜单
*/
.system_menu{
height
:
50px
;
width
:
100%
;
background-color
:
#0767c8
;
margin
:
0px
;
}
/*
* 系统菜单包裹层高度与父同高,且居中显示
*/
.system_menu_wrapper{
margin
:
0
auto
;
height
: inherit;
width
:
960px
;
clear
:
both
;
}
|
1
2
3
4
5
6
7
8
9
10
11
|
.system_menu_search input{
width
:
360px
;
height
:
36px
;
border
:
1px
solid
#045BB3
;
border-radius:
4px
;
/*使<input>垂直居中*/
margin-top
:
7px
;
margin-bottom
:
7px
;
/*在chrome浏览器下去掉<input>焦点时的外边框*/
outline
:
none
;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
|
/*
* 系统菜单项设置
*/
.system_menu_item ul{
height
:
50px
;
line-height
:
50px
;
margin-left
:
15px
;
}
.system_menu_item li{
float
:
left
;
width
:
50px
;
margin
:
auto
8px
;
text-align
:
center
;
}
.system_menu_item li:hover{
background-color
:
#ff901d
;
}
.system_menu_item a, .system_menu_user_wrapper a{
color
:
#FFF
;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
/*
* 系统用户菜单项设置
*/
.system_menu_user{
float
:
right
;
width
:
120px
;
height
: inherit;
}
.system_menu_user_wrapper{
width
: inherit;
height
: inherit;
line-height
:
50px
;
}
.system_menu_user_wrapper i, .system_menu_user_wrapper span{
float
:
left
;
}
.system_menu_user_wrapper i, .system_menu_user_wrapper span, .system_menu_user_setting_home, .system_menu_user_setting_set, .system_menu_user_setting_exit, .system_menu_user_setting span{
float
:
left
;
}
.system_menu_user_wrapper span, .system_menu_user_setting span{
width
:
83px
;
text-align
:
center
;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
|
/*头像样式*/
.system_menu_user_wrapper i{
width
:
27px
;
height
:
27px
;
/*若无属性背景图片无法显示*/
display
: inline-
block
;
background-image
:
url
(../../upload/
default
/
default
.jpg);
background-repeat
:
no-repeat
;
/*居中显示*/
margin-top
:
12px
;
margin-left
:
10px
;
}
|
1
2
3
4
|
/*鼠标放置在用户菜单上时背景色变为棕****/
.system_menu_user_wrapper:hover, .system_menu_user_setting li:hover{
background-color
:
#ff901d
;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
|
system_menu_user_setting li{
height
:
40px
;
line-height
:
40px
;
background-color
:
#095FB3
;
color
:
#FFF
;
border-top
:
1px
solid
#0D5AA5
}
.system_menu_user_setting_home, .system_menu_user_setting_set, .system_menu_user_setting_exit{
width
:
20px
;
height
:
20px
;
/*若无属性背景图片无法显示*/
display
: inline-
block
;
background-image
:
url
(navigation.png);
background-repeat
:
no-repeat
;
/*居中显示*/
margin-top
:
10px
;
margin-left
:
17px
;
}
.system_menu_user_setting span{
width
:
83px
;
text-align
:
center
;
}
.system_menu_user_setting_home{
background-position
:
-6px
-7px
;
}
.system_menu_user_setting_set{
background-position
:
-6px
-60px
;
}
.system_menu_user_setting_exit{
background-position
:
-6px
-87px
;
}
|
1
2
3
|
.system_menu_user_setting{
display
:
none
;
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
|
/**
* 生成系统公共菜单
*/
function
generateSystemMenu()
{
var
systemMenu =
'<div class="system_menu">'
;
systemMenu +=
'<div class="system_menu_wrapper">'
;
systemMenu +=
'<div class="system_menu_search">'
;
systemMenu +=
'<input type="text" id="system_menu_searcher">'
;
systemMenu +=
'</div>'
;
systemMenu +=
'<div class="system_menu_item">'
;
systemMenu +=
'<ul>'
;
systemMenu +=
'<li><a href="#">下战书</a></li>'
;
systemMenu +=
'<li><a href="#">首页</a></li>'
;
systemMenu +=
'<li><a href="#">专家</a></li>'
;
systemMenu +=
'</ul>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'<div class="system_menu_user">'
;
systemMenu +=
'<div class="system_menu_user_wrapper">'
;
systemMenu +=
'<a href="#"><i></i><span>陈许诺</span></a>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'<div class="system_menu_user_setting">'
;
systemMenu +=
'<ul>'
;
systemMenu +=
'<li><i class="system_menu_user_setting_home"></i><span>主页</span></li>'
;
systemMenu +=
'<li><i class="system_menu_user_setting_set"></i><span>设置</span></li>'
;
systemMenu +=
'<li><i class="system_menu_user_setting_exit"></i><span>退出</span></li>'
;
systemMenu +=
'</ul>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'</div>'
;
systemMenu +=
'</div>'
;
$(systemMenu).appendTo($(
"#system_navigation_menu"
));
}
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
|
<!DOCTYPE HTML>
<
html
>
<
head
>
<
title
>medical</
title
>
<
link
rel
=
"stylesheet"
type
=
"text/css"
href
=
"theme/navigation/navigation.css"
>
<
script
src
=
"js/common/jquery.js"
></
script
>
<
script
src
=
"js/common/common.js"
></
script
>
<
script
src
=
"js/login/login.js"
></
script
>
</
head
>
<
body
>
<
div
id
=
"system_navigation_menu"
>
</
div
>
<
div
>
<
h1
>This is Login page!</
h1
>
</
div
>
</
body
>
</
html
>
|
1
2
3
4
5
6
|
(
function
( window){
$(document).ready(
function
()
{
generateSystemMenu();
});
})( window );
|