網站首頁（含功能表列）實現

最後更新：2017-07-25 來源：互聯網

上載者：User

創建阿里雲帳戶，並獲得超過 40 款產品的免費試用版；而企業帳戶則可以享有總值 $1200 的免費試用版。立即註冊！

標籤：mil rem after lan over orange 技術子功能表 his

<%@ 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>

網站首頁（含功能表列）實現

本文章原先以中文撰寫並發佈於 aliyun.com，亦設英文版本，僅作資訊用途。本網站不對文章的準確性，完整性或可靠性或其任何翻譯作出任何明示或暗示的陳述或保證。如對該文章有任何疑慮或投訴，請傳送電郵至 info-contact@alibabacloud.com 並提供相關疑慮或投訴的詳細說明。職員會於 5 個工作天內與您聯絡，一經驗證之後，即會刪除該侵權內容。

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

24/7 Technical Support 6 Free Tickets per Quarter Faster Response

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

網站首頁（含功能表列）實現

聯繫我們

熱門內容

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support

網站首頁（含功能表列）實現

聯繫我們

熱門內容

熱門主題

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support