整合營(yíng)銷服務(wù)商
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
電腦端+手機(jī)端+微信端=數(shù)據(jù)同步管理
免費(fèi)咨詢熱線：
不多說(shuō)，直奔主題
<!--html代碼-->
<div>
<ul>
<li><a href="#home" class="active">主頁(yè)</a></li>
<li><a href="#news">新聞</a></li>
<li>
<div class="dropdown">
<a href="#" class="dropbtn">下拉菜單</a>
<div class="dropdown-content">
<a href="#">鏈接 1</a>
<a href="#">鏈接 2</a>
<a href="#">鏈接 3</a>
</div>
</div>
</li>
<li><a href="#about">關(guān)于</a></li>
</ul>
<h3>導(dǎo)航欄上的下拉菜單</h3>
<p>鼠標(biāo)移動(dòng)到 "下拉菜單" 鏈接先顯示下拉菜單。</p>
</div>/*css代碼*/
ul {
list-style-type: none;
margin: 0;
padding: 0;
background-color: #999;
overflow: hidden;
/* 注意: overflow:hidden 添加到 ul 元素,以防止 li 元素列表的外出(當(dāng)li{float:left}時(shí))。 來(lái)源鏈接：https://www.runoob.com/try/try.php?filename=trycss_navbar_horizontal_float&basepath=0 */
}
li {
float: left;
}
li a {
color: white;
padding: 14px 16px;
display: inline-block;
text-decoration: none;
}
li>a.active {
background-color: green;
}
li>a:hover:not(a.active),
.dropbtn:hover {
background-color: #555;
}
.dropdown-content {
display: none;
position: absolute;
/* 默認(rèn)相對(duì)于<html>進(jìn)行絕對(duì)定位 */
background-color: #f9f9f9;
min-width: 100px;
box-shadow: 0 8px 16px 0 rgba(0, 0, 0, .2);
}
.dropdown-content a {
color: black;
display: block;
/* 因?yàn)?lt;a>標(biāo)簽不是塊元素，min-width:100px不會(huì)生效 */
}
.dropdown-content a:hover {
background-color: #f1f1f1;
color: deepskyblue;
}
.dropdown:hover .dropdown-content {
display: block;
opacity: 0.9;/*下拉菜單半透明效果*/
}
/* 中間的空格表示，鼠標(biāo)懸念在.dropdown上時(shí)，dropdown的子元素.dropdown-content變?yōu)閴K元素 */
/* ### 待完善 ###
因?yàn)?dropdown只用過(guò)一次，覺(jué)得可以刪除<div class="dropdown"></div>來(lái)減少代碼量，嘗試 將.dropdown:hover .dropdown-content {display: block;} 修改為.dropbtn:hover+.dropdown-content {display: block;} 并刪除<div class="dropdown"></div>后，鼠標(biāo)懸停在“下拉菜單”上，會(huì)顯示下拉菜單， 但無(wú)法選中菜單中的“鏈接 x”， ### 為什么？該如何完善？ ###
*/最終效果圖：
tml5移動(dòng)端常用顯示隱藏菜單的實(shí)現(xiàn)，點(diǎn)擊側(cè)邊菜單內(nèi)容展開，這些都是移動(dòng)端頁(yè)面經(jīng)常用到的
如下：
點(diǎn)擊菜單按鈕后
展開第三級(jí)菜單效果如下
實(shí)現(xiàn)方法
html結(jié)構(gòu)代碼:
\
css:
樣式代碼有點(diǎn)多，想要源碼的可以私信找我要
javascript：
認(rèn)情況下，當(dāng)我們使用 Safari 或 iPhone 上的任何網(wǎng)絡(luò)瀏覽器訪問(wèn)網(wǎng)站時(shí)會(huì)看到該網(wǎng)站的移動(dòng)版本。雖然從地址欄手動(dòng)請(qǐng)求桌面網(wǎng)站非常容易，但如果我們一直需要使用站點(diǎn)的完整桌面版本，可強(qiáng)制 Safari 將桌面站點(diǎn)加載到 iPhone 上。
蘋果 iPhone 手機(jī)的尺寸越來(lái)越大，再加上有了 HTML5，我們?cè)谑謾C(jī)上查看桌面網(wǎng)站并沒(méi)有想象的那么糟糕。正確設(shè)置后，Safari 即可加載網(wǎng)站的桌面版本，以下為強(qiáng)制 Safari 在 iPhone 上加載桌面站點(diǎn)的操作方法：
一：打開從 iPhone 主屏幕進(jìn)入【設(shè)置】；
二：在設(shè)置菜單中，向下滾動(dòng)并點(diǎn)擊【Safari】；
三：進(jìn)入【 Safari 】后向下滾動(dòng)，找到【請(qǐng)求桌面網(wǎng)站】；
四：在所有網(wǎng)站上自動(dòng)請(qǐng)求桌面版本。
這樣設(shè)置后，訪問(wèn) Safari 中的任何網(wǎng)站就會(huì)自動(dòng)進(jìn)入該頁(yè)面的完整桌面版本。
當(dāng)然了，我們?nèi)匀豢梢噪S時(shí)通過(guò)點(diǎn)擊【aA】圖標(biāo)并選擇【請(qǐng)求移動(dòng)網(wǎng)站】來(lái)查看該網(wǎng)站的移動(dòng)版本。
需要注意的是，Safari 只能在可用時(shí)顯示網(wǎng)站的桌面版本。例如，當(dāng)我們嘗試訪問(wèn) Apple 官方網(wǎng)站時(shí)，將看到移動(dòng)版而不是完整的桌面版網(wǎng)站。
*請(qǐng)認(rèn)真填寫需求信息，我們會(huì)在24小時(shí)內(nèi)與您取得聯(lián)系。
