<!DOCTYPE HTML>
<html lang="en-US">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>css3蓝色导航菜单 - 网页模板</title>
<link rel="stylesheet" type="text/css" href="css/base.css" media="all" />
<script type="text/javascript" charset="UTF-8" src="js/prefixfree.min.js"></script>
<style type="text/css" media="screen">
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 .3s 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;
}
</style>
</head>
<body>
<div class="page">
<header id="header">
<hgroup class="white blank">
</hgroup>
</header>
<section class="demo">
<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>
</section>
</div>
<div style="text-align:center;clear:both">
<p>适用浏览器：FireFox、Chrome、Safari、Opera、傲游、搜狗. 不支持IE8、360、世界之窗。</p>
<p>来源：<a href="http://www.w3cplus.com/" target="_blank">w3cplus</a></p>
</div>
</body>
</html>
css3蓝色导航菜单 css3蓝色导航菜单代码下载.zip （7个子文件） 
css3蓝色导航菜单 css3蓝色导航菜单代码下载 jiaoben838 css 
base.css 1KB fonts icomoon.woff 69KB
icomoon.svg 227KB icomoon.eot 45KB icomoon.ttf 45KB
index.html 7KB js prefixfree.min.js 6KB资源评论
芝麻粒儿
- 粉丝: 6w+
- 资源: 2万+
最新资源
- 基于Vite、React 18、TypeScript、React Router DOM 6和Redux的React 18新特性实践设计源码
- 基于Vue框架的多智能体COVID-19传播过程可视化仿真系统设计源码
- springboot687基于Spring Boot的在线考试系统--论文.zip
- springboot688基于SpringBoot的CSGO赛事管理系统--论文.zip
- springboot689基于Springboot的漫画网站--论文.zip
- springboot691基于vue的地方美食分享网站--论文.zip
- springboot690基于vue的MOBA类游戏攻略分享平台--论文.zip
- springboot692基于web的智慧养老平台--论文.zip
- springboot693基于协同过滤算法商品推荐系统.zip
- springboot694大学生租房系统--论文.zip
- springboot695学生就业管理系统--论文.zip
- 基于Vue框架的学生宿舍管理系统设计源码
- springboot698家具商城系统.zip
- springboot696学生考勤管理系统--论文.zip
- springboot697学生选课系统.zip
- springboot699小学家校一体“作业帮”的设计与实现.zip
资源上传下载、课程学习等过程中有任何疑问或建议，欢迎提出宝贵意见哦~我们会及时处理！
点击此处反馈
