这套CSS3+JS开发的网站顶部导航栏菜单特效,可以实现鼠标悬停导航菜单有下划线的动画效果,可以完美适应电脑端和手机端,非常不错的一套网站导航条插件。
使用方法:
<nav>
<div class="logo">
<img src="img/fixed_logo.png" alt="Logo Image">
</div>
<div class="hamburger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
<ul class="nav-links">
<li><a href="#">网站首页</a></li>
<li><a href="#">解决方案</a></li>
<li><a href="#">产品中心</a></li>
<li><a href="#">售后服务</a></li>
<li><a href="#">联系我们</a></li>
<li><button class="login-button" href="#">登录</button></li>
<li><button class="join-button" href="#">注册</button></li>
</ul>
</nav>
<script src="js/script.js"></script>
效果截图: