js侧边栏导航菜单特效代码下载


js侧边栏导航菜单特效代码下载
js侧边栏导航菜单特效代码下载以及侧边栏、导航菜单等js/jquery网页特效代码下载。

1. 引入CSS

<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.11.2/css/all.min.css'>
<link rel='stylesheet' href='https://fonts.googleapis.com/css?family=Montserrat&amp;display=swap'>
<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src="js/script.js"></script>

3. HTML代码

<h1>Frosted Menu</h1>
<nav>
	<div class="menu-btn">
		<div class="line line__1"></div>
		<div class="line line__2"></div>
		<div class="line line__3"></div>
	</div>
	<div class="sub-menu-btn">
		<div class="line line__1"></div>
		<div class="line line__2"></div>
	</div>
	<ul class="nav-links">
		<li class="link">
			<a href="#">Home</a>
		</li>
		<li class="link">
			<a href="#">About</a>
			<ol>
				<li><a href="#">designers</a></li>
				<li><a href="#">developers</a></li>
			</ol>
		</li>
		<li class="link">
			<a href="#">Work</a>
			<ol>
				<li><a href="#">web</a></li>
				<li><a href="#">graphic </a></li>
				<li><a href="#">apps </a></li>
			</ol>
		</li>
		<li class="link">
			<a href="#">Contact</a>
			<ol>
				<li><a href="#">Email</a></li>
				<li><a href="#">Social</a></li>
			</ol>
		</li>
		<li class="link">
			<a href="#">follow me</a>
			<ol>
				<li>
					<a target="_blank" href="https://www.51qianduan.com/">
						Twitter <i class="fab fa-twitter"></i>
					</a>
				</li>
				<li>
					<a target="_blank" href="https://www.51qianduan.com/">
						Codepen <i class="fab fa-codepen"></i>
					</a>
				</li>
			</ol>
		</li>
	</ul>
</nav>

相关推荐

发表评论

相关文章