小米網css3導航下拉選單程式碼

阿新 • • 發佈：2019-01-18

  1 <!doctype html>
  2 <!-- W3C規範 -->
  3 <html lang="zh">
  4 <!-- 宣告 -->
  5 <head>
  6 <meta charset="UTF-8">
  7 <!-- 聲明當前頁面的三要素 -->
  8 <title>CSS3選單仿小米官網選單 - 何問起</title><base target="_blank" />
  9 <meta name="Keywords" content 
="關鍵字,何問起,選單,CSS3">
 10 <meta name="Description" content="描述,hovertree.com,何問起CSS3選單">
 11 <!-- 樣式 -->
 12 <style type="text/css">
 13 * {
 14 margin: 0px;
 15 padding: 0px;
 16 }
 17 
 18 .nav {
 19 position: relative;
 20 width: 994px;
 21 height: 52px;
 22 background: 
 #404144;
 23 margin: 0 auto;
 24 }
 25 
 26 .nav li {
 27 list-style: none;
 28 float: left;
 29 line-height: 50px;
 30 }
 31 
 32 .nav li a {
 33 display: block;
 34 text-decoration: none;
 35 color: #FFFFFF;
 36 padding: 0px 15px;
 37 font-family: "微軟雅黑";
 38 }
 39 
 40 .nav li a:hover .xs  
{
 41 display: block;
 42 }
 43 
 44 .nav li a:hover {
 45 background: #333333;
 46 }
 47 
 48 .nav li a .xs {
 49 border: 1px solid #cccccc;
 50 border-top: none;
 51 display: none;
 52 width: 992px;
 53 background: #FFFFFF;
 54 position: absolute;
 55 top: 50px;
 56 left: 0px;
 57 }
 58 
 59 .nav li a .xs .xiao {
 60 position: absolute;
 61 top: -8px;
 62 border-left: 8px solid transparent;
 63 border-right: 8px solid transparent;
 64 border-bottom: 8px solid #FFFFFF;
 65 width: 0px;
 66 height: 0px;
 67 z-index: 999;
 68 }
 69 
 70 .nav li:nth-child(1) .xiao {
 71 left: 20px;
 72 }
 73 
 74 .nav li:nth-child(2) .xiao {
 75 left: 98px;
 76 }
 77 
 78 .nav li:nth-child(3) .xiao {
 79 left: 177px;
 80 }
 81 
 82 .nav li:nth-child(4) .xiao {
 83 left: 255px;
 84 }
 85 
 86 .nav li:nth-child(5) .xiao {
 87 left: 348px;
 88 }
 89 
 90 .nav li:nth-child(6) .xiao {
 91 left: 427px;
 92 }
 93 
 94 .nav li:nth-child(7) .xiao {
 95 left: 496px;
 96 }
 97 
 98 .nav li:nth-child(8) .xiao {
 99 left: 576px;
100 }
101 
102 .nav li:nth-child(9) .xiao {
103 left: 646px;
104 }
105 
106 .nav li:nth-child(10) .xiao {
107 left: 706px;
108 }
109 .hovertreeinfo {
110 text-align:center;} .hovertreeinfo a{color:blue;}
111 </style>
112 </head>
113 
114 <body>
115 <div class="nav">
116 <ul>
117 <li><a href="http://hovertree.com/h/bjaf/5yh8pnpj.htm">首頁</a></li>
118 <li>
119 <a href="http://hovertree.com/">
120 何問起網
121 <div class="xs">
122 <div class="xiao"></div>
123 <img src="http://hovertree.com/texiao/css3/19/img/1.jpg" />
124 </div>
125 </a>
126 </li>
127 <li>
128 <a href="http://hovertree.com/code/javascript/8lp142er.htm">
129 紅米
130 <div class="xs">
131 <div class="xiao"></div>
132 <img src="http://hovertree.com/texiao/css3/19/img/2.jpg" />
133 </div>
134 </a>
135 </li>
136 <li><a href="http://hovertree.com/h/bjaf/v84hu8e9.htm">小米平板</a></li>
137 <li><a href="http://hovertree.com/code/jquery/qmio0dq9.htm">小米電視</a></li>
138 <li>
139 <a href="http://hovertree.com/h/bjaf/c7d7k8te.htm">
140 盒子
141 <div class="xs">
142 <div class="xiao"></div>
143 <img src="http://hovertree.com/texiao/css3/19/img/3.jpg" />
144 </div>
145 </a>
146 </li>
147 <li>
148 <a href="http://hovertree.com/h/bjaf/nebj8df9.htm">
149 路由器
150 <div class="xs">
151 <div class="xiao"></div>
152 <img src="http://hovertree.com/texiao/css3/19/img/4.jpg" />
153 </div>
154 </a>
155 </li>
156 <li><a href="http://hovertree.com/h/bjaf/a1wnr9gs.htm">合約機</a></li>
157 <li><a href="http://hovertree.com/h/bjaf/kqud99m6.htm">服務</a></li>
158 <li><a href="http://hovertree.com/h/bjaf/0i85qaml.htm">社群</a></li>
159 </ul>
160 </div>
161 <div class="hovertreeinfo">
162 <a href="http://hovertree.com/h/bjaf/xiaomimenu.htm">原文</a> <a href="http://hovertree.com">首頁</a> <a href="http://hovertree.com/texiao/">特效</a>
163 </div>
164 </body>
165 </html>

小米網css3導航下拉選單程式碼

1 <!doctype html> 2  3 <html lang="zh"> 4  5 <head> 6 <meta charset="UTF-8">

用jquery製作一個二級導航下拉選單

大體流程： 1使用$(function(){...})獲取到想要作用的HTML元素。 2通過使用children()方法尋找子元素。 &

純css製作導航下拉選單

轉載文章，覺得作者思路很好 <nav> <ul>

CSS 導航下拉選單

<!DOCTYPE html > <html> <head> <meta charset="utf-8"> <title>自學教程

Bootstrap使用Tab和dropdown實現導航下拉選單效果

<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>Drop

Jquery和Css實現的下拉選單程式碼

其實京東的下拉選單最多的是使用者體驗。各位可以去看看他的選單是怎麼做的。在哪裡體現了使用者方便。使所有的分類儘量都展示在使用者眼中。導航下拉選單是一款基於jquery+css3實現的下拉導航選單特效。灰色下拉選單特效是一款基於jquery實現的FlexNav

導航下拉選單Css實現

<!DOCTYPE html> <html> <head> <title>demo</title> <style type="text/css"> * { margin: 0px;

Axure導航欄移入移出顯示隱藏下拉選單——紀梵希官網導航欄動效

最近學習了一下網頁原型製作。仿照紀梵希官網做的網頁原型，其中導航欄涉及邏輯較複雜，打卡記錄一下。首先，分析官網導航欄動效的需求： 1.滑鼠點選導航選項卡，跳轉至對應的導航頁面。 2.滑鼠移入導航選項卡時，出現對應的下拉選單，選項卡下方顯示選中狀態。 3.滑鼠向上移出選項卡時，下

用position來寫導航的下拉選單

今天來用position來寫下拉選單，話不多說，直接上程式碼， <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewpo

JS--jQuery實現的多級下拉選單效果程式碼

這篇文章主要介紹了jQuery實現的多級下拉選單效果程式碼,涉及jquery滑鼠事件及頁面元素的顯示與隱藏效果實現技巧,非常具有實用價值,需要的朋友可以參考下: 本文例項講述了jQuery實現的多級下拉選單效果程式碼。供大家參考。具體如下：這是一款jQuery多級下拉選單，在支援html5

tp3導航（帶下拉選單）如何實現？

獲取父級選單控制器 public function __construct(){ parent::__construct();//必須寫，不然assign 會報錯 //網站欄目導航 $cate=D('category'); $where['parentid']=0;

Bootstrap -- 下拉選單、輸入框組、導航選單

Bootstrap -- 下拉選單、輸入框組、導航選單 1. 下拉選單可以使用帶有各種大小按鈕的下拉選單：.btn-lg、.btn-sm 或 .btn-xs。實現下拉選單： <!DOCTYPE html> <html> <head> <

還原淘寶首頁最頂部的導航欄（含下拉選單，圖示等）

　　還原了淘寶首頁最頂部的導航欄，包括了各個導航的下拉列表等（位置對齊稍微有些偏差，畢竟沒有原版設計圖），用到了jquery，js，CSS3等知識。沒有花時間去做錄屏GIF，就幾張效果圖看下：如下　　原始導航欄進去後如上圖，當滑鼠劃過後下拉選單出現，本身的背景色改變等。如下：上圖為區域選擇，每

前端歷程(三)---頁面小練習之導航欄加下拉選單

前言預備環節完成後就要開始練習寫一些小頁面或是小東西，首先是做一個簡單的導航欄及下拉選單的小練習。在此之前也會先介紹一下一個比較好用的css屬性。 display：flex display，display屬性設定一個元素應如何顯示。隱藏一個元素可以通過把d

3種方法實現導航選單欄中的二級下拉選單

我們在淘寶、搜狐等大型網站上都可以看到使用的一些二級下拉選單，比如下面這張圖片。我們有至少三種方式來實現，附上程式碼供大家參考。 1.僅使用html和css <!DOCTYPE html><html lang="en"><head><meta

Bootstrap導航欄和下拉選單

導航欄寫法示例： <nav class="nav navbar-default"> <div class="container"> <div class="navbar-header">

Odoo8中“更多”下拉選單選項指定後臺執行程式碼

在Odoo8中的倉庫模組，根據每日最小安全庫存數量，系統會自動生成一些補貨單，而且是一個產品會生成一筆，如果產品比較多，這裡生成的補貨單也會很多。如果這裡的補貨單沒有即時處理，那相同產品後續不會再生成新的補貨單。所以採購人員要求不處理的補貨單可以手動來取消，這樣方便第二

Bootstrap3.3.7導航欄下拉選單滑鼠滑過展開

$(function () { $(".dropdown").mouseover(function () { $(this).addClass("open"); });

純CSS實現下拉選單導航

前言：本題是網易雲課堂的前端微專業《頁面製作》課程的作業題，當時對題意理解錯誤沒有實現題目要求，成了心中永遠的痛，所謂念念不忘必有迴響，在學校圖書館花了幾個小時做出來並對相關知識點進行了總結，寫了這篇博文。好，進入正題。－－－－－－－－－－－－－－－－

css3加js寫的下拉選單動畫小圖示,不好的地方請指點,謝謝

小米網css3導航下拉選單程式碼

相關推薦