網站首頁（含菜單欄）實現
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
<link rel="stylesheet" type="text/css" href="/Vendor/resources/css/fruit.css">
<style type="text/css">
body {
font-family: sans-serif;
font-size: 12px;
}
.hidden {
display: none;
}
/* 高亮顯示 */
.highlight {
background: silver;
}
/* box-sizing 為元素指定的任何內邊距和邊框都將在已設定的寬度和高度內進行繪制 */
div {
float: left;
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
height: 40px;
line-height: 40px;
width: 100%;
padding: 0;
}
.default-btn {
height: 20px;
line-height: 20px;
width: 50px;
padding: 0px;
}
/* 設置最小寬度 */
.header {
min-width: 800px;
}
.header-logo {
width: 15%;
background: red;
}
.header-menu {
width: 55%;
background: yellow;
}
.header-search {
width: 15%;
}
.header-user {
width: 15%;
background: blue;
}
/* 高度設置為自動 當子菜單顯示時 高度自適應 */
.header-menu-top {
height: auto;
width: 100px;
}
/* 偽類 懸停於頂層菜單時顏色變換 */
.title-menu-top:hover {
color: #FFF;
}
.header-menu-sub {
position: relative;
top: 0px;
height: auto;
width: 200px;
border: 1px solid orange;
background: #FFF;
}
.btn-header-menu-sub-close {
text-align: center;
}
.header-search {
background: orange;
}
/* 字體圖標 采用Font Awesome解決方案 */
.btn-header-search::after {
font-family: fruit;
display: block;
position: relative;
content: ‘\f002‘;
}
.header-user {
}
.header-user:hover {
color: red;
}
.header-user-current {
margin-right: 10px;
}
/* 字體圖標 采用Font Awesome解決方案 */
.header-user-current::after {
display: block;
float: left;
content: ‘\f2c0‘;
margin-right: 10px;
font-family: fruit;
}
.footer {
height: auto;
min-width: 800px;
background: gray;
}
.footer div {
float: left;
height: auto;
width: auto;
margin: 0 10px 0 10px;
padding: 5px 0 5px 0;
text-indent: 10px;
}
/* 相鄰兄弟選擇器 */
.footer div + div {
border-left: 1px solid red;
}
input {
height: 20px;
width: 100px;
padding: 0px;
margin: 0px;
}
</style>
<script type="text/javascript" src="/Vendor/resources/jquery.js"></script>
<script>
//隱藏子菜單
function delayHide() {
$(‘.header-menu-sub‘).hide();
}
$(document).ready(function() {
var t;
//頁面加載時隱藏子菜單
$(‘.header-menu-sub‘).hide();
//鼠標懸停子菜單選項時 清除timeout計時 高亮顯示當前子菜單選項
$(‘.header-menu-sub‘).children().on(‘mouseover‘, function() {
clearTimeout(t);
$(this).addClass("highlight");
});
//鼠標離開子菜單選項時 延時隱藏子菜單 去高亮顯示當前子菜單選項
$(‘.header-menu-sub‘).children().on(‘mouseout‘, function() {
t = setTimeout("delayHide()", 500);
$(this).removeClass(‘highlight‘);
});
//鼠標懸停頂層菜單標題時 清除timeout計時 隱藏所有子菜單後顯示當前子菜單
$(‘.title-menu-top‘).on(‘mouseover‘, function() {
clearTimeout(t);
$(‘.header-menu-sub‘).hide();
$(this).next().slideDown(500);
});
//鼠標離開頂層菜單標題時 延時隱藏當前子菜單
$(‘.title-menu-top‘).on(‘mouseout‘, function() {
t = setTimeout("delayHide()", 500);
});
//收起當前子菜單
$(‘.btn-header-menu-sub-close‘).on(‘click‘, function() {
$(this).parent().slideUp(500);
});
$(‘.btn-header-search‘).on(‘click‘, function() {
alert(‘search‘);
});
$(‘.header-user‘).on(‘click‘, function() {
$(‘#embed-login‘).toggle();
});
});
</script>
</head>
<body>
<div>
<div class="header">
<div class="header-logo">Fruit</div>
<div class="header-menu">
<div class="header-menu-top">
<div style="background: lime;" class="title-menu-top">Apricot</div>
<div class="header-menu-sub">
<div>A</div>
<div>B</div>
<div class="btn-header-menu-sub-close">close</div>
</div>
</div>
<div class="header-menu-top">
<div style="background: maroon;" class="title-menu-top">Banana</div>
<div class="header-menu-sub">
<div>A</div>
<div>B</div>
<div class="btn-header-menu-sub-close">close</div>
</div>
</div>
</div>
<div class="header-search">
<div style="background: gray; width: auto;">
<input type="text" style="padding: 9px 0 9px 0; border: 1px solid gray; border-right: 0;" placeholder="search"/>
</div>
<div style="width: auto; border: 1px solid gray; border-left: 0px; font-size: 16px;" class="btn-header-search">
</div>
</div>
<div class="header-user">
<div style="float: right; width: auto;" class="header-user-current">User</div>
<div id="embed-login" style="position: relative; border: 1px solid red;" class="hidden">
<input type="button" value="login" onclick="alert(‘login‘)"/>
</div>
</div>
</div>
<div class="footer">
<div>Home</div>
<div>Origin</div>
<div>Help</div>
</div>
</div>
</body>
</html>
網站首頁（含菜單欄）實現