基于bootstrap 写的一个前端导航样式

最新推荐文章于 2023-07-24 13:56:47 发布

涛小涛

最新推荐文章于 2023-07-24 13:56:47 发布

阅读量2.6k

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/liuying1802028915/article/details/79918021

版权

前端专栏收录该内容

8 篇文章 1 订阅

订阅专栏

这几天在做公司官网，想实现一个网页中导航栏的样式，类似于这个网站的效果：

http://litta.co/

即就是鼠标往下滚动的时候页面最上面的导航栏可以有一个收缩的效果。

具体HTML代码如下：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>一个导航栏的练习</title>
		<link rel="stylesheet" href="css/bootstrap.min.css" />
		<link rel="stylesheet" href="css/style.css" />
		<script src="js/jquery.js"></script>
		
	</head>
	<body>
		<div class="preloader">
			<div class="spinner">
				<div class="pre-bounce1"></div>
				<div class="pre-bounce2"></div>
			</div>
		</div>
		
		<div id="page" class="hfeed site">
			<a class="slip-link screen-reader-text" href="test01.html"></a>
			<header id="masthead" class="site-header" role="banner">
				<div class="header-wrap">
					<div class="container">
						<div class="row">
							<div class="col-md-3 col-sm-8 col-xs-12">
								<a href="test01.html" >
									<img class="site-logo" src="img/logo-white.png" />
								</a>
							</div>
							<div class="col-md-6 col-sm-4 col-xs-12">
								<div class="btn-menu"></div>
								<nav id="mainnav" class="mainnav" role="navigation">
									<div class="menu-primary-menu-container">
										<ul id="menu-primary-menu" class="menu">
											<li id="menu-item-581" class="scrollable menu-item menu-item-type-custom menu-item-object-custom menu-item-581">
												<a href="test01.html">About the App</a>
											</li>
											<li id="menu-item-169" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-ancestor current-menu-parent current_page_parent current_page_ancestor menu-item-has-children menu-item-169">
												<a href="test01.html">Our Services</a>
												<ul class="sub-menu">
													<li id="menu-item-359" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-145 current_page_item menu-item-359">
														<a href="test01.html">FFFFF</a>
													</li>
													<li id="menu-item-443" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-443">
														<a href="test01.html">GGGGGGGG</a>
													</li>
												</ul>
											</li>
											<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322">
												<a href="test01.html">DDDD</a>
											</li>
											<li id="menu-item-322" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-322">
												<a href="test01.html">DDDD</a>
											</li>
										</ul>
									</div>
								</nav>
							</div>
						</div>
					</div>
				</div>
			</header>
			
			<div style="height: 4000px; background: #00BEAF;"></div>
		</div>
		
		
		<script src="js/scripts.js"></script>
		<script src="js/main.min.js"></script>
	</body>
</html>

所用到的css 文件和js文件请到

http://litta.co/ 页面的源代码页面下载

http://litta.co/wp-content/themes/sydney/css/bootstrap/bootstrap.min.css?ver=1

http://litta.co/wp-content/themes/sydney/style.css?ver=20170504

http://litta.co/wp-content/themes/sydney/js/main.min.js?ver=20170504

http://litta.co/wp-content/themes/sydney/js/scripts.js?ver=4.9.5