先上图看效果,简洁大气,经常会用的到的
HTML Code:
< div class="page-menu-wrapper clearfix"> < ul class="menu-function"> < li >< a href="" title="">CATEGORIES</ a > < ul class="dropdown-menu categories"> < li >< a href="" title="">Design</ a ></ li > < li >< a href="" title="">Freebies</ a ></ li > < li >< a href="" title="">Tutorials</ a ></ li > < li >< a href="" title="">Coding</ a ></ li > < li >< a href="" title="">Inspiration</ a ></ li > < li >< a href="" title="">WordPress</ a ></ li > < li >< a href="" title="">Resources</ a ></ li > </ ul > </ li > < li >< a href="" title="">SHOP</ a ></ li > < li id="search">< a href="#search" title="">SEARCH</ a ></ li > < li id="search-hidden">< input type="text" name="" id="">< a href="#search-hidden" title=""></ a ></ li > </ ul > < ul class="menu-share"> < li >< a href="" title="">FOLLOW US</ a > < ul class="dropdown-menu follow"> < li >< a href="" title="">RSS</ a ></ li > < li >< a href="" title="">Twitter</ a ></ li > < li >< a href="" title="">Facebook</ a ></ li > < li >< a href="" title="">Google+</ a ></ li > < li >< a href="" title="">Dribbble</ a ></ li > </ ul > </ li > < li >< a href="" title="">SHARE</ a > < ul class="dropdown-menu share"> < li >< a href="" title="">Facebook</ a ></ li > < li >< a href="" title="">Twitter</ a ></ li > < li >< a href="" title="">Google+</ a ></ li > </ ul > </ li > </ ul > </ div > |
CSS Code:
body { background-color : #F6F8F8 ; } a { color : #fff ; } a:hover { color : #3d61a2 ; text-decoration : none ; } .demo { margin-top : 40px ; min-height : 300px ; } .page-menu-wrapper { width : 960px ; line-height : 45px ; margin : 0 auto ; background-color : #446cb3 ; } .page-menu-wrapper > ul > li { position : relative ; float : left ; border-left : 1px solid #3d61a2 ; border-right : 1px solid #3d61a2 ; margin-right : -1px ; } .menu-function { float : left ; } .menu-share { float : right ; } .page-menu-wrapper > .menu-function > li:first-child { border-left : none ; } .page-menu-wrapper > .menu-share > li:last-child { border-right : none ; } .page-menu-wrapper a { position : relative ; display : block ; padding : 0 15px ; transition: all . 3 s ease-out; } .page-menu-wrapper > ul > li:hover > a { color : #3d61a2 ; background-color : #fff ; } .page-menu-wrapper > ul > li:hover .dropdown-menu { display : block ; } .dropdown-menu { display : none ; position : absolute ; width : 260px ; font-size : 18px ; font-weight : bold ; text-align : left ; background-color : #fff ; } .dropdown-menu.categories a { color : #000 ; } .dropdown-menu.categories a:hover { color : #5bc4be ; margin-left : 10px ; } #search:target a[href= "#search" ] { display : none ; } #search:target ~ #search- hidden { display : block ; } #search- hidden { display : none ; padding : 0 5px ; background-color : #fff ; } #search- hidden input { border : none ; line-height : 24px ; width : 180px ; } #search- hidden a { float : right ; padding : 0 ; width : 20px ; height : 45px ; } #search- hidden a:before { content : "\7d" ; left : 0 ; color : #446cb3 ; } .menu-function > li > a,.menu-share > li > a { padding-left : 40px ; } .page-menu-wrapper a:before { position : absolute ; left : 15px ; font-family : 'icomoon' ; font-style : normal ; speak : none ; font-weight : normal ; font-smoothing: antialiased; font-size : 18px ; vertical-align : middle ; } .menu-function > li:nth-child( 1 ) > a:before { content : "\e048" ; } .menu-function > li:nth-child( 2 ) > a:before { content : "\3b" ; } .menu-function > li:nth-child( 3 ) > a:before { content : "\7d" ; } .menu-share > li:nth-child( 1 ) > a:before { content : "\e0a2" ; } .menu-share > li:nth-child( 2 ) > a:before { content : "\e05b" ; } /*follow*/ .dropdown-menu.follow { width : 223px ; } .dropdown-menu.follow a { padding-left : 35px ; font-size : 14px ; } .dropdown-menu.follow a:before { left : 10px ; } .dropdown-menu.follow li:nth-child( 1 ) a:before { content : "\e0a5" ; } .dropdown-menu.follow li:nth-child( 2 ) a:before { content : "\e0a2" ; } .dropdown-menu.follow li:nth-child( 3 ) a:before { content : "\e04c" ; } .dropdown-menu.follow li:nth-child( 4 ) a:before { content : "\e022" ; } .dropdown-menu.follow li:nth-child( 5 ) a:before { content : "\e03d" ; } .dropdown-menu.follow li:nth-child( 1 ) a { color : #ffaa31 ; } .dropdown-menu.follow li:nth-child( 2 ) a { color : #07beed ; } .dropdown-menu.follow li:nth-child( 3 ) a { color : #314d91 ; } .dropdown-menu.follow li:nth-child( 4 ) a { color : #2d2d2d ; } .dropdown-menu.follow li:nth-child( 5 ) a { color : #e84788 ; } .dropdown-menu.follow li:nth-child( 1 ):hover { background-color : #ffaa31 ; } .dropdown-menu.follow li:nth-child( 2 ):hover { background-color : #07beed ; } .dropdown-menu.follow li:nth-child( 3 ):hover { background-color : #314d91 ; } .dropdown-menu.follow li:nth-child( 4 ):hover { background-color : #2d2d2d ; } .dropdown-menu.follow li:nth-child( 5 ):hover { background-color : #e84788 ; } .dropdown-menu.follow li:hover a { color : #fff ; margin-left : 10px ; } .dropdown-menu.share { width : 120px ; right : 0 ; } .dropdown-menu.share a { margin : 10px ; line-height : 26px ; font-size : 12px ; padding-left : 20px ; border : 1px solid #cbcbcb ; border-radius: 2px ; color : #4c4c4c ; background-color : #efefef ; } .dropdown-menu.share a:hover { background-color : #fff ; } .dropdown-menu.share li a:before { font-size : 12px ; left : 5px ; } .dropdown-menu.share li:nth-child( 1 ) a:before { content : "\e04c" ; color : #314d91 ; } .dropdown-menu.share li:nth-child( 2 ) a:before { content : "\e0a2" ; color : #07beed ; } .dropdown-menu.share li:nth-child( 3 ) a:before { content : "\e022" ; color : #2d2d2d ; } @font-face { font-family : 'icomoon' ; src : url ( 'fonts/icomoon.eot' ); src : url ( 'fonts/icomoon.eot?#iefix' ) format ( 'embedded-opentype' ), url ( 'fonts/icomoon.svg#icomoon' ) format ( 'svg' ), url ( 'fonts/icomoon.woff' ) format ( 'woff' ), url ( 'fonts/icomoon.ttf' ) format ( 'truetype' ); font-weight : normal ; font-style : normal ; } |
最后附上下载包:toolBarMenu.rar
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】凌霞软件回馈社区,博客园 & 1Panel & Halo 联合会员上线
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 智能桌面机器人:用.NET IoT库控制舵机并多方法播放表情
· Linux glibc自带哈希表的用例及性能测试
· 深入理解 Mybatis 分库分表执行原理
· 如何打造一个高并发系统?
· .NET Core GC压缩(compact_phase)底层原理浅谈
· 手把手教你在本地部署DeepSeek R1,搭建web-ui ,建议收藏!
· 新年开篇:在本地部署DeepSeek大模型实现联网增强的AI应用
· Janus Pro:DeepSeek 开源革新,多模态 AI 的未来
· 互联网不景气了那就玩玩嵌入式吧,用纯.NET开发并制作一个智能桌面机器人(三):用.NET IoT库
· 【非技术】说说2024年我都干了些啥