导航栏

最新推荐文章于 2023-07-04 11:04:04 发布
最新推荐文章于 2023-07-04 11:04:04 发布
阅读量291 收藏
点赞数
分类专栏： css
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>导航栏</title>
<style type="text/css">
*{padding: 0px;margin: 0px;}
.nav_mainbav{width: 100%;background-color: rgba(191,171,134,0.3);}
.subnav{width: 1000px;margin:0 auto; }
.subnav ul li{list-style: none;float: left;background:#D3D6A3;}
.subnav ul li a{font-family:'Microsoft_YaHeid5bc9bcde198f6';color: #333333;font-size: 18px;font-weight: bold;display: block;position: relative;padding: 20px 20px 13px;transition: color .2s ease-in-out;-webkit-transition: color .2s ease-in-out;text-decoration: none;}
.subnav ul li a.active{color: #009688;border-bottom:#009688 solid 2px;}


  /*subnav start*/
  .subnav ul li a:before {
    content: "";
    position: absolute;
    bottom: -2px;
    width: 0;
    border-bottom: solid 2px;
  }
  .subnav ul li a:before {
    left: 0;
  }


  .subnav ul li a:hover {
    color: #009688;
  }


  .subnav ul li a:hover:before {
    width: 100%; 
  }


  .subnav ul li a:before {
    -webkit-transition: width .2s ease-in-out;
    transition: width .2s ease-in-out;
  }
</style>
</head>
<body>
<div class="nav_mainbav">
<div class="subnav">
<ul>
<li><a href="index.html">首页</a></li>
<li><a href="mood.html">心情随笔</a></li>
<li><a href="technique.html">技术分享</a></li>
<li><a href="case.html">Web开发</a></li>
<li><a href="message.html">Blog留言</a></li>
<li><a href="about.html" class="active">关于我</a></li>
<li><a href="library.html">藏书阁</a></li>
</ul>
<div class="cl"></div>
</div>
</div>
</body>

</html>



============================================================================


<!DOCTYPE html>
<html lang="zh">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>CSS3圆形主菜单</title>
<link href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet">
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css" rel="stylesheet">
<link rel="stylesheet" type="text/css" href="css/zzsc.css">
<style type="text/css">


.demo{
padding: 2em 0;
transform: translate3d(0, 0, 0);
}
.navbar{
width: 150px;
height: 150px;
line-height: 150px;
border-radius: 50%;
background: #28A32E;
margin: 70px auto;
position: relative;
cursor: pointer;
text-align: center;
font-size: 1.75em;
font-weight: bold;
color: #fff;
transition: 0.24s 0.2s;
}
.navbar:hover{
background: rgba(50,158,20,.3);
color: #000;
}
.navbar .menu{
list-style: none;
padding: 0;
margin: 0;
position: absolute;
top: -75px;
left: -75px;
border: 150px solid transparent;
cursor: default;
border-radius: 50%;
transform: scale(0);
transition: transform 1.4s 0.07s;
z-index: -1;
}
.navbar:hover .menu{
transition: transform 0.4s 0.08s, z-index   0s  0.5s;
transform: scale(1);
z-index: 1;
}
.navbar .menu li{
position: absolute;
top: -100px;
left: -100px;
transform-origin: 100px 100px;
transition: all 0.5s 0.1s;
}
.navbar:hover .menu li{
transition: all 0.6s;
}
.navbar .menu li a{
width: 45px;
height: 45px;
line-height: 45px;
border-radius: 50%;
background: #28A32E;
position: absolute;
font-size: 60%;
color: #000;
transition: 0.6s;
}
.navbar:hover .menu li:nth-child(1){
transition-delay: 0.02s;
transform: rotate(85deg);
}
.navbar:hover .menu li:nth-child(1) a{
transition-delay: 0.04s;
transform: rotate(635deg);
}
.navbar:hover .menu li:nth-child(2){
transition-delay: 0.04s;
transform: rotate(125deg);
}
.navbar:hover .menu li:nth-child(2) a{
transition-delay: 0.08s;
transform: rotate(595deg);
}
.navbar:hover .menu li:nth-child(3){
transition-delay: 0.06s;
transform: rotate(165deg);
}
.navbar:hover .menu li:nth-child(3) a{
transition-delay: 0.12s;
transform: rotate(555deg);
}
.navbar:hover .menu li:nth-child(4){
transition-delay: 0.08s;
transform: rotate(205deg);
}
.navbar:hover .menu li:nth-child(4) a{
transition-delay: 0.16s;
transform: rotate(515deg);
}
.navbar:hover .menu li:nth-child(5){
transition-delay: 0.1s;
transform: rotate(245deg);
}
.navbar:hover .menu li:nth-child(5) a{
transition-delay: 0.2s;
transform: rotate(475deg);
}
.navbar:hover .menu li:nth-child(6){
transition-delay: 0.12s;
transform: rotate(285deg);
}
.navbar:hover .menu li:nth-child(6) a{
transition-delay: 0.24s;
transform: rotate(435deg);
}
.navbar:hover .menu li:nth-child(7){
transition-delay: 0.14s;
transform: rotate(325deg);
}
.navbar:hover .menu li:nth-child(7) a{
transition-delay: 0.28s;
transform: rotate(395deg);
}
.navbar:hover .menu li:nth-child(8){
transition-delay: 0.16s;
transform: rotate(365deg);
}
.navbar:hover .menu li:nth-child(8) a{
transition-delay: 0.32s;
transform: rotate(355deg);
}
.navbar:hover .menu li:nth-child(9){
transition-delay: 0.18s;
transform: rotate(405deg);
}
.navbar:hover .menu li:nth-child(9) a{
transition-delay: 0.36s;
transform: rotate(315deg);
}
</style>
</head>
<body>
<div class="demo">
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="navbar">主菜单
<ul class="menu">
<li><a href="#" class="fa fa-facebook"></a></li>
<li><a href="#" class="fa fa-google-plus"></a></li>
<li><a href="#" class="fa fa-twitter"></a></li>
<li><a href="#" class="fa fa-linkedin"></a></li>
<li><a href="#" class="fa fa-pinterest"></a></li>
<li><a href="#" class="fa fa-rss"></a></li>
<li><a href="#" class="fa fa-instagram"></a></li>
<li><a href="#" class="fa fa-skype"></a></li>
<li><a href="#" class="fa fa-github"></a></li>
</ul>
</div>
</div>
</div>
</div>
</div>
</body>
</html>


===========华丽的分割线=====================================================================

<!DOCTYPE html>
<html lang="en" class="no-js">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> 
<meta name="viewport" content="width=device-width, initial-scale=1.0"> 
<title>jQuery全屏大幅下拉菜单导航</title>
<style type="text/css">
/* General Demo Style */
@import url(http://fonts.useso.com/css?family=Lato:300,400,700);


@font-face {
font-family: 'fontawesome';
src:url('../fonts/fontawesome.eot');
src:url('../fonts/fontawesome.eot?#iefix') format('embedded-opentype'),
url('../fonts/fontawesome.svg#fontawesome') format('svg'),
url('../fonts/fontawesome.woff') format('woff'),
url('../fonts/fontawesome.ttf') format('truetype');
font-weight: normal;
font-style: normal;
}


body, html { font-size: 100%; padding: 0; margin: 0;}


/* Reset */
*,
*:after,
*:before {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}


/* Clearfix hack by Nicolas Gallagher: http://nicolasgallagher.com/micro-clearfix-hack/ */
.clearfix:before,
.clearfix:after {
content: " ";
display: table;
}


.clearfix:after {
clear: both;
}


body {
    font-family: 'Lato', Calibri, Arial, sans-serif;
    color: #47a3da;
}


a {
color: #f0f0f0;
text-decoration: none;
}


a:hover {
color: #000;
}


.cbp-hrmenu {
width: 100%;
margin-top: 2em;
border-bottom: 4px solid #47a3da;
}


/* general ul style */
.cbp-hrmenu ul {
margin: 0;
padding: 0;
list-style-type: none;
}


/* first level ul style */
.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 90%;
max-width: 70em;
margin: 0 auto;
padding: 0 1.875em;
}


.cbp-hrmenu > ul > li {
display: inline-block;
}


.cbp-hrmenu > ul > li > a {
font-weight: 700;
padding: 1em 2em;
color: #999;
display: inline-block;
}


.cbp-hrmenu > ul > li > a:hover {
color: #47a3da;
}


.cbp-hrmenu > ul > li.cbp-hropen a,
.cbp-hrmenu > ul > li.cbp-hropen > a:hover {
color: #fff;
background: #47a3da;
}


/* sub-menu */
.cbp-hrmenu .cbp-hrsub {
display: none;
position: absolute;
background: #47a3da;
width: 100%;
left: 0;
}


.cbp-hropen .cbp-hrsub {
display: block;
padding-bottom: 3em;
}


.cbp-hrmenu .cbp-hrsub-inner > div {
width: 33%;
float: left;
padding: 0 2em 0;
}


.cbp-hrmenu .cbp-hrsub-inner:before,
.cbp-hrmenu .cbp-hrsub-inner:after {
content: " ";
display: table;
}


.cbp-hrmenu .cbp-hrsub-inner:after {
clear: both;
}


.cbp-hrmenu .cbp-hrsub-inner > div a {
line-height: 2em;
}


.cbp-hrsub h4 {
color: #afdefa;
padding: 2em 0 0.6em;
margin: 0;
font-size: 160%;
font-weight: 300;
}


/* Examples for media queries */


@media screen and (max-width: 52.75em) { 


.cbp-hrmenu {
font-size: 80%;
}


}


@media screen and (max-width: 43em) { 


.cbp-hrmenu {
font-size: 120%;
border: none;
}


.cbp-hrmenu > ul,
.cbp-hrmenu .cbp-hrsub-inner {
width: 100%;
padding: 0;
}


.cbp-hrmenu .cbp-hrsub-inner {
padding: 0 2em;
font-size: 75%;
}


.cbp-hrmenu > ul > li {
display: block;
border-bottom: 4px solid #47a3da;
}


.cbp-hrmenu > ul > li > a { 
display: block;
padding: 1em 3em;
}


.cbp-hrmenu .cbp-hrsub { 
position: relative;
}


.cbp-hrsub h4 {
padding-top: 0.6em;
}


}


@media screen and (max-width: 36em) { 
.cbp-hrmenu .cbp-hrsub-inner > div {
width: 100%;
float: none;
padding: 0 2em;
}
}
</style>
</head>
<body>
<div class="container">
<div class="main">
<nav id="cbp-hrmenu" class="cbp-hrmenu">
<ul>
<li>
<a href="#">Products</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner"> 
<div>
<h4>Learning &amp; Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Downloads</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner">
<div>
<h4>Education &amp; Learning</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Applications</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner"> 
<div>
<h4>Learning &amp; Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
<div>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Projects</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner"> 
<div>
<h4>Learning &amp; Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
<h4>Utilities</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
</ul>
</div>
<div>
<h4>Entertainment</h4>
<ul>
<li><a href="#">Gadget Finder</a></li>
<li><a href="#">Green Tree Express</a></li>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Holy Cannoli</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
<li>
<a href="#">Freeware</a>
<div class="cbp-hrsub">
<div class="cbp-hrsub-inner"> 
<div>
<h4>Utilities</h4>
<ul>
<li><a href="#">Green Tree Pro</a></li>
<li><a href="#">Wobbler 3.0</a></li>
<li><a href="#">Coolkid</a></li>
</ul>
<h4>Education</h4>
<ul>
<li><a href="#">Learn Thai</a></li>
<li><a href="#">Math Genius</a></li>
<li><a href="#">Chemokid</a></li>
</ul>
</div>
<div>
<h4>Professionals</h4>
<ul>
<li><a href="#">Success 1.0</a></li>
<li><a href="#">Moneymaker</a></li>
</ul>
</div>
<div>
<h4>Learning &amp; Games</h4>
<ul>
<li><a href="#">Catch the Bullet</a></li>
<li><a href="#">Snoopydoo</a></li>
<li><a href="#">Fallen Angel</a></li>
<li><a href="#">Sui Maker</a></li>
<li><a href="#">Wave Master</a></li>
<li><a href="#">Golf Pro</a></li>
</ul>
</div>
</div><!-- /cbp-hrsub-inner -->
</div><!-- /cbp-hrsub -->
</li>
</ul>
</nav>
</div>
</div>


<script type="text/javascript" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201611/jiaoben4683/js/jquery.min.js"></script>
<script type="text/javascript" src="http://demo.sc.chinaz.com//Files/DownLoad/webjs1/201611/jiaoben4683/js/cbpHorizontalMenu.min.js"></script>
<script type="text/javascript">
$(function() {
cbpHorizontalMenu.init();
});
</script>
</body>
</html>


一梦醉殇
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
了解如何使用 HTML、CSS 和 JavaScript 构建响应式导航栏
我的博客，不一样的自我表达
06-30 352
响应式用户友好的导航栏对于任何 Web 应用程序都是必不可少的，无论您是使用前端三连胜构建静态网站还是使用 React 和 Angular 等技术的 SPA，了解如何构建精心设计的导航栏至关重要。本分步教程将为您提供清晰的演练，以及构建响应式导航栏的非常简单的方法，该导航栏可无缝适应不同的屏幕尺寸并为用户提供直观的浏览体验。如果您是初学者，重要的是要了解，在使用 HTML 构建时，建议避免过度使用 div 容器。相反，您应该采用更加语义化的方法。为了确保清晰，我们将整个教程分解为一系列步骤。
小米官网导航栏代码实现
01-30
小米官网 导航栏 HTML页面
【javascript】导航栏
qq_63806300的博客
07-04 650
要实现这样的效果主要有两点。第一，当鼠标经过主导航栏里面的内容就会被放大，鼠标离开后就会恢复原来的样子；第二，当鼠标经过主导航时对应的副导航的内容就会呈现。
javaScript 导航栏
alh83044的博客
04-18 369
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> *{margin: 0;padding: 0;} #inde_nav{ width: 225px; ...
CSS/JavaScript导航栏
qq_41918580的博客
12-03 403
网页导航栏制作 导航栏在网页中是最基本的方法，虽然用的知识不是很多，但是初学者必不可少的部分，下面我将演示我写的导航栏样式，不是多美，望包涵。 1.1 导航栏效果图 1.2 CSS方式书写导航栏 <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <meta name="vi...
导航栏（javascript和jQuery）
吃豆子的小新新的博客
05-30 213
用原生JavaScript和JQuery两种写法实现点击导航栏切换效果 html代码 <nav id="nav"> <ul> <li><a href="javascript:void(0);">首页</a></li> <li><a href="javascript:void(0);">第二页</a></li> <li>&l
css控制列表与导航的制作(水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样
09-25
主要介绍了css控制列表与导航的制作,包括水平导航条、垂直翻转的列表、垂直导航栏、内联列表、列表样式等制作方法,需要的朋友可以参考下
Qt 自定义导航栏
01-26
在本文中，我们将深入探讨如何在Qt环境中自定义一个功能丰富、样式美观的树形导航栏。Qt是一个跨平台的应用程序开发框架，广泛用于创建GUI应用程序。自定义导航栏是提高用户界面（UI）吸引力和易用性的重要手段，...
android动态显示导航栏.
06-18
在Android开发中，动态显示导航栏是一个常见的需求，特别是在创建自定义布局或者需要根据用户行为动态改变导航元素的应用中。标题“android动态显示导航栏”指的是在运行时生成和更新导航栏，而不是在XML布局文件中...
jetpack compose 底部导航栏
最新发布
08-17
在Android应用设计中，底部导航栏（Bottom Navigation Bar）是一个常见的组件，用于在多个主视图之间提供平滑的导航。在这个讨论中，我们将深入探讨如何使用Jetpack Compose来创建一个“完美的”底部导航栏。 首先...
顶部导航条
05-19
选项卡组件，可配合ViewPager使用，用于指示器。这个也是我最初设计的目的，当然也可单独使用。 每个tab标签都可自定义，通过yIndicator.addTab(View view)添加标签。当标签改变时，可用通过设置监听器来改变标签的样式：
JavaScript导航条
weixin_33816300的博客
01-22 86
<!DOCTYPE HTML><html><head><meta charset="utf-8" /><title>导航条</title><style>*{margin:0;padding:0;list-style:none;}ul{width:960px;margin:0 auto;back...
JavaScript——导航条
chengxu2726的博客
06-23 363
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http...
制作类似csdn网站的导航栏
codroid
08-10 1122
首先写html代码，如下： 导航栏 导航1 导航2 导航3 导航4 导航5 导航6 导航7 导航8 导航9 导航0 然后
一个不错的javascript导航条
伴老
04-21 4654
Kvar mmenus    = new Array();var misShow   = new Boolean(); misShow=false;var misdown   = new Boolean();misdown=false;var mnumberofsub=0;var musestatus=false;var mpopTimer = 0;mmenucolor=#89CB10;m
导航栏、状态栏
qq_35440907的博客
05-18 179
/*设置导航栏颜色*/ func setNavigationBarColor() { /* 官方文档地址https://developer.apple.com/forums/thread/682420 */ if #available(iOS 15.0, *) { let newAppearance = UINavigationBarAppearance() newApp...
网页导航栏
azizizizizi的博客
01-29 86
html导航栏遇到的一些问题
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值