关于兼容ie6,ie7等等，我想xp系统可以升级到最高浏览器版本是ie8，就不考虑了，不行就帮客户升级下
效果图（仿bootsrap的）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/1.8.3/jquery.js"></script>
</head>
<style>
* {
padding: 0;
margin: 0;
}
body {
height: 800px;
}
.placeholder {
color: #999;
}
.header {
width: 100%;
height: 50px;
padding-right: 15px;
padding-left: 15px;
background-color: #f8f8f8;
border-color: #e7e7e7;
color: #777;
line-height: 50px;
}
.container {
padding-right: 15px;
padding-left: 15px;
margin-right: auto;
margin-left: auto;
width: 1170px;
font-size: 1em;
}
.header-title {
float: left;
}
.header-menu {
float: right;
}
.header-menu ul {
text-decoration: none;
}
.header-menu ul li {
display: inline-block;
}
.header-search {
width: 200px;
height: 20px;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
font-size: 14px;
line-height: 20px;
color: #555;
background-color: #fff;
background-image: none;
border: 1px solid #ccc;
border-radius: 4px;
display: inline-block;
vertical-align: middle;
}
.header-search:hover {
border-color: #888;
border-radius: 4px;
}
.btn {
display: inline-block;
padding-top: 6px;
padding-bottom: 6px;
padding-left: 12px;
padding-right: 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 22px;
text-align: center;
white-space: nowrap;
vertical-align: middle;
cursor: pointer;
border-width: 1px;
border-style: solid;
border-color: transparent;
border-top-right-radius: 4px;
border-top-left-radius: 4px;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
}
.header-menu input[type='text'] {
outline: none;
}
.btn-default {
color: #333;
background-color: #fff;
border-color: #ccc;
}
.mess-img,
.head-img {
width: 21px;
height: 21px;
vertical-align: middle;
cursor: pointer;
position: relative;
}
.mess-img-wrap>span {
height: 20px;
width: 20px;
background-color: red;
color: #fff;
position: absolute;
right: 0;
top: 6px;
font-size: .6em;
line-height: 20px;
text-align: center;
padding-left: 1px;
padding-right: 1px;
z-index: 1;
border-radius: 50%;
behavior: url('./source/PIE.htc');
}
.header-li1,
.header-li2,
.header-li3 {
padding-left: 10px;
padding-right: 10px;
position: relative;
}
.header-li2:hover,
.header-li3:hover {
background-color: #e7e7e7;
}
.header-li2 {
cursor: pointer;
}
.header-menu ul li .header-li3:hover .head-ext {
display: block;
}
.header-menu ul li .header-li2:hover .head-ext-tap-title {
display: inline-block;
}
.head-img {
margin-right: 8px;
border-top-right-radius: 50%;
border-top-left-radius: 50%;
border-bottom-right-radius: 50%;
border-bottom-left-radius: 50%;
}
.head-text {
display: inline-block;
}
.head-ext {
display: none;
position: absolute;
top: 50px;
right: 0;
width: 130px;
height: auto;
border: 1px solid #ccc;
border-bottom-right-radius: 4px;
border-bottom-left-radius: 4px;
border-top: none;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
padding-top: 5px;
background-color: #fff;
}
.header-li2 .head-ext {
width: 320px;
}
.header-li2 .head-ext ul li {
height: auto;
text-align: left;
}
.head-ext ul li {
display: block;
text-align: center;
font-size: .8em;
height: 30px;
line-height: 30px;
margin-top: 5px;
margin-bottom: 5px;
cursor: pointer;
padding-left: 20px;
padding-right: 20px;
position: relative;
}
.isNewMess {
position: absolute;
left: 6px;
top: -2px;
color: red;
font-size: 2.5em;
}
.head-ext ul li:hover {
background-color: #f6f6f6;
}
.head-ext ul li:last-of-type {
border: none;
}
.head-ext-last-li {
border: none;
}
.head-ext-tap {
position: relative;
width: 320px;
height: 40px;
border-bottom: 3px solid #bdc3c7;
}
.head-ext-tap-title {
float: left;
width: 160px;
height: 40px;
line-height: 40px;
text-align: center;
}
.head-ext-tap-title-active {
color: #34495e;
}
.head-ext-tap-title-activeline {
position: absolute;
width: 160px;
height: 3px;
background-color: #34495e;
bottom: -3px;
transition: .6s;
}
#cover {
position: fixed;
left: 0px;
top: 0px;
background: rgba(0, 0, 0, 0.4);
width: 100%;
/*宽度设置为100%，这样才能使隐藏背景层覆盖原页面*/
height: 100%;
filter: alpha(opacity=60);
/*设置透明度为60%*/
opacity: 0.6;
/*非IE浏览器下设置透明度为60%*/
display: none;
z-index: 999;
}
#mess-box p {
display: none;
padding: 20px;
text-align: center;
}
</style>
<body>
<div id="cover"></div>
<div class="header">
<div class="container">
<div class="header-title">
xxx管理系统
</div>
<div class="header-menu">
<ul>
<li>
<div class="header-li1">
<input class="header-search" type="text" placeholder="请输入xxx" />
<button type="submit" class="btn btn-default">搜索</button>
</div>
</li>
<li>
<div class="header-li2">
<div class="mess-img-wrap">
<span></span>
<img class="mess-img" src="./img/mess1.png">
</div>
<div id="mess-box" class="head-ext">
<div class="head-ext-tap">
<div id="business-info" class="head-ext-tap-title head-ext-tap-title-active"
mess-type="1">业务通知
</div>
<div id="system-info" class="head-ext-tap-title" mess-type="2">系统公告</div>
<div class="head-ext-tap-title-activeline"></div>
</div>
<p>
暂无消息
</p>
<!-- <ul>
<li>
<div>
一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西
</div>
</li>
<li>
<div>
一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西
</div>
</li>
<li>
<div>
一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西
</div>
</li>
<li>
<div>
一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西一些消息记录吧乱七八糟的东西
</div>
</li>
<li class="head-ext-last-li">一些消息记录吧乱七八糟的东西</li>
</ul> -->
</div>
</div>
</li>
<li>
<div class="header-li3">
<img class="head-img" src="http://demo.jeesite.com/js/static/images/user1.jpg" alt="">
<div class="head-text">
tester
<div class="head-ext">
<ul>
<li>密码重置</li>
<li class="head-ext-last-li">退出登录</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
</div>
</div>
</body>
<script>
$(function () {
//ie处理
setIeCss();
function isIE() {
if (!!window.ActiveXObject || "ActiveXObject" in window) {
return true;
}
return false;
}
function IEVersion() {
if (document.documentMode) return document.documentMode;
}
function setIeCss() {
$('.container').css({
'width': $(window).width() - 100 + 'px',
'fontSize': isIE() ? '1.4em' : '1em'
});
$('.header-search').css({
'lineHeight': isIE() ? '22px' : '20px'
});
if (!placeholderSupport()) { // 判断浏览器是否支持 placeholder
$('[placeholder]').focus(function () {
var input = $(this);
if (input.val() == input.attr('placeholder')) {
input.val('');
input.removeClass('placeholder');
}
}).blur(function () {
var input = $(this);
if (input.val() == '' || input.val() == input.attr('placeholder')) {
input.addClass('placeholder');
input.val(input.attr('placeholder'));
}
}).blur();
};
}
function placeholderSupport() {
return 'placeholder' in document.createElement('input');
}
function ie8Handler(preObj,currentObj) {
if (IEVersion() == 8) {
currentObj.css({
'borderBottomColor': '#34495e',
'borderBottomStyle': 'solid',
'borderBottomWidth': '3px'
});
preObj.css('borderBottom', 'none');
$('.head-ext-tap-title-activeline').css('height', '0');
} else {
$('.head-ext-tap-title-activeline').css('height', '3px');
currentObj.css('borderBottom', 'none');
}
}
//消息数量处理
setInterval(function () {
setMessTotal();
}, 5e3);
setMessTotal();
//设置和获取消息数量
function setMessTotal() {
var total = parseInt(Math.random() * (Math.random() > 0.5 ? 100 : 1000))
console.log(total);
$('.mess-img-wrap>span').html(total > 1e2 ? '···' : total);
}
//创建消息节点
function _createMessInfo() {
//先移除后创建
$('#mess-box ul').remove();
$('#mess-box ul li').unbind()
// 消息查询
var data = queryMessInfo();
//无数据处理
if (data.length == 0) {
return $('#mess-box p').css('display', 'block')
}
$('#mess-box .head-ext-tap').after('<ul></ul>');
for (var i = 0; i < data.length; i++) {
var item = data[i];
var newInfoDotClass = item.isNew ? 'isNewMess' : '';
var newInfoDot = item.isNew ? '·' : '';
$('#mess-box ul').append('<li><span class=\"' + newInfoDotClass + '\">' + newInfoDot + '</span>' + item.info + '</li>')
}
// 添加事件
$('#mess-box ul li').click(function (url) { navigateTo('https://www.baidu.com/') })
}
//查询消息数据信息
function queryMessInfo() {
//根据选项更新数据来源
var messType = $('#mess-box .head-ext-tap-title-active').attr('mess-type')
if (messType == 1) {
return [{
'info': '这是业务消息',
'isNew': true
}, {
'info': 'jQuery 极大地简化了 JavaScript 编程。',
'isNew': true
}, {
'info': 'jQuery 很容易学习。',
'isNew': true
}, {
'info': '本章节的每一篇都包含了在线实例',
'isNew': false
}, {
'info': '通过本站的在线编辑器，你可以在线运行修改后的代码，并查看运行结果。',
'isNew': false
}, {
'info': 'jQuery 实例',
'isNew': true
}, {
'info': '在本教程中，您将通过教程以及许多在线实例，学到如何通过使用 jQuery 应用 JavaScript 效果。',
'isNew': true
}];
}
return [{
'info': '这是系统通知',
'isNew': true
}, {
'info': 'jQuery 极大地简化了 JavaScript 编程。',
'isNew': true
}, {
'info': 'jQuery 很容易学习。',
'isNew': true
}, {
'info': '本章节的每一篇都包含了在线实例',
'isNew': false
}, {
'info': '通过本站的在线编辑器，你可以在线运行修改后的代码，并查看运行结果。',
'isNew': false
}, {
'info': 'jQuery 实例',
'isNew': true
}, {
'info': '在本教程中，您将通过教程以及许多在线实例，学到如何通过使用 jQuery 应用 JavaScript 效果。',
'isNew': true
}];
}
// 这里会冒泡事件，所以不用在tap栏单独加事件控制
$('.header-menu ul li .header-li2').click(function () {
//节点创建
_createMessInfo()
$('#mess-box').fadeIn("fast").css('zIndex', '9999');
$('#cover').fadeIn("fast");
});
$('#business-info').click(function () {
$('.head-ext-tap-title-activeline').css({ 'transform': 'translateX(0)' });
ie8Handler($('#system-info'),$('#business-info'))
$('#business-info').addClass('head-ext-tap-title-active')
$('#system-info').removeClass('head-ext-tap-title-active')
})
$('#system-info').click(function () {
$('.head-ext-tap-title-activeline').css({ 'transform': 'translateX(160px)' });
ie8Handler($('#business-info'),$('#system-info'))
$('#business-info').removeClass('head-ext-tap-title-active')
$('#system-info').addClass('head-ext-tap-title-active')
})
$('#cover').click(function () {
$('#mess-box').fadeOut("fast");
$('#cover').fadeOut("fast");
})
// 跳转
function navigateTo(url) {
var tempwindow = window.open(url, '_blank');
return false;
}
});
</script>
</html>
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
