CSS3實(shí)現(xiàn)的水平標(biāo)題菜單
發(fā)布時(shí)間:2021-04-14 16:24:00 作者:Dhanush Badge
我要評(píng)論

這篇文章主要介紹了CSS3實(shí)現(xiàn)的水平標(biāo)題菜單的示例代碼,幫助大家更好的理解和學(xué)習(xí)使用CSS3制作網(wǎng)頁(yè)特效,感興趣的朋友可以了解下
實(shí)現(xiàn)效果:
實(shí)現(xiàn)代碼
html
<nav class="dropdownmenu"> <ul> <li><a href="http://www.jochaho.com/wordpress/">腳本之家</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">jb51</a></li> <li><a href="#">Articles on HTML5 & CSS3</a> <ul id="submenu"> <li><a href="http://www.jochaho.com/wordpress/difference-between-svg-vs-canvas/">Difference between SVG vs. Canvas</a></li> <li><a href="http://www.jochaho.com/wordpress/new-features-in-html5/">New features in HTML5</a></li> <li><a href="http://www.jochaho.com/wordpress/creating-links-to-sections-within-a-webpage/">Creating links to sections within a webpage</a></li> </ul> </li> <li><a href="http://www.jochaho.com/wordpress/category/news/">News</a></li> <li><a href="http://www.jochaho.com/wordpress/about-pritesh-badge/">Contact Us</a></li> </ul> </nav>
CSS3
.dropdownmenu ul, .dropdownmenu li { margin: 0; padding: 0; } .dropdownmenu ul { background: gray; list-style: none; width: 100%; } .dropdownmenu li { float: left; position: relative; width:auto; } .dropdownmenu a { background: #30A6E6; color: #FFFFFF; display: block; font: bold 12px/20px sans-serif; padding: 10px 25px; text-align: center; text-decoration: none; -webkit-transition: all .25s ease; -moz-transition: all .25s ease; -ms-transition: all .25s ease; -o-transition: all .25s ease; transition: all .25s ease; } .dropdownmenu li:hover a { background: #000000; } #submenu { left: 0; opacity: 0; position: absolute; top: 35px; visibility: hidden; z-index: 1; } li:hover ul#submenu { opacity: 1; top: 40px; /* adjust this as per top nav padding top & bottom comes */ visibility: visible; } #submenu li { float: none; width: 100%; } #submenu a:hover { background: #DF4B05; } #submenu a { background-color:#000000; }
以上就是CSS3實(shí)現(xiàn)的水平標(biāo)題菜單的詳細(xì)內(nèi)容,更多關(guān)于CSS3 標(biāo)題菜單的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
一套CSS3的新擬物風(fēng)格UI元素(復(fù)選框/按鈕/菜單/搜索框/時(shí)鐘)
這是基于CSS3和HTML5的新擬物風(fēng)格UI設(shè)計(jì)元素,包含單選/復(fù)選框、按鈕、Tab菜單、搜索框,另外還有時(shí)鐘等表單元素,歡迎下載2021-03-233組不同風(fēng)格的CSS3后臺(tái)管理系統(tǒng)菜單特效代碼
這是一款基于Tailwind CSS3的后臺(tái)管理系統(tǒng)菜單,提供3組漂亮的風(fēng)格主題,非常適合為網(wǎng)站或者App的后臺(tái)系統(tǒng)提供主菜單導(dǎo)航。感興趣的朋友跟隨小編一起看看吧2021-01-21HTML+CSS3+JS 實(shí)現(xiàn)的下拉菜單
這篇文章主要介紹了HTML+CSS3+JS 如何實(shí)現(xiàn)下拉菜單,幫助大家更好的理解和使用CSS3特效,感興趣的朋友可以了解下2020-11-25- 這篇文章主要介紹了CSS3實(shí)現(xiàn)菜單懸停效果的示例代碼,幫助大家更好的制作CSS3特效,美化網(wǎng)頁(yè),感興趣的朋友可以了解下2020-11-17
- CSS3懸停展開(kāi)旋轉(zhuǎn)菜單特效代碼是一款鼠標(biāo)移動(dòng)到頭像上就會(huì)展開(kāi)旋轉(zhuǎn)菜單特效。2020-11-16
左側(cè)豎直分類(lèi)導(dǎo)航菜單CSS3代碼
CSS3左側(cè)豎直分類(lèi)導(dǎo)航菜單是一款白色,黑色,藍(lán)色三款不同色調(diào)的左側(cè)豎直導(dǎo)航菜單,帶圖標(biāo)和搜索框的分類(lèi)導(dǎo)航菜單ui布局。2020-09-09漂亮的css3功能菜單多級(jí)的實(shí)現(xiàn)代碼
漂亮的css3功能菜單多級(jí),圖標(biāo)庫(kù)使用cdn,可以替換為本地的。非常實(shí)用,喜歡的朋友快來(lái)腳本之家下載吧2020-07-20js+css3實(shí)現(xiàn)的藍(lán)色手風(fēng)琴圖標(biāo)菜單特效源碼
是一段基于js+css3實(shí)現(xiàn)的藍(lán)色樣式手風(fēng)琴上下收縮展開(kāi)菜單代碼,非常簡(jiǎn)潔大方,適應(yīng)于網(wǎng)站后臺(tái)使用,例如:會(huì)員中心等等,歡迎有興趣的朋友前來(lái)下載2020-07-07純CSS3實(shí)現(xiàn)鼠標(biāo)右鍵顯示網(wǎng)頁(yè)功能菜單特效
網(wǎng)頁(yè)功能菜單CSS3特效是一款鼠標(biāo)右鍵顯示功能菜單列表,支持子菜單展開(kāi)特效。歡迎下載使用2020-07-05css3實(shí)現(xiàn)鼠標(biāo)懸停扇形導(dǎo)航菜單源碼
這篇文章給大家分享一款特效源碼是基于css3實(shí)現(xiàn)鼠標(biāo)懸停扇形導(dǎo)航菜單,當(dāng)鼠標(biāo)放在菜單上會(huì)自動(dòng)展示出菜單,非常不錯(cuò),感興趣的朋友前來(lái)下載源碼吧2020-06-19