自制响应式导航栏

自己弄着玩的，当做参考就行。

PC端：

手机端：(点击“导航”即可隐藏和展示导航栏，一开始导航栏是隐藏的)

 

话不多说直接放代码：

HTML：

        <ul class="bignav">
			<div class="mybottom"></div>
			<li class="first"><a href="javascript:;">home</a></li>
			<li><a href="javascript:;">show</a></li>
			<li><a href="javascript:;">suggest</a></li>
			<li><a href="javascript:;">about</a></li>
			<li><a href="javascript:;">more</a></li>
		</ul>
		<div class="smallnav">
			<div class="unfold">导航</div>
			<div class="home"><a href="javascript:;">home</a></div>
			<div class="show"><a href="javascript:;">show</a></div>
			<div class="suggest"><a href="javascript:;">suggest</a></div>
			<div class="about"><a href="javascript:;">about</a></div>
			<div class="more"><a href="javascript:;">more</a></div>
		</div>

CSS：

            body {
				background-color: #8ab9ff;
			}

			ul {
				width: 500px;
				height: 66px;
				background-color: #ffffff;
				display: flex;
				justify-content: space-around;
				align-items: center;
				border-radius: 30px;
				box-shadow: 1px 5px 10px rgba(0, 0, 0, 0.5);
				padding: 0px;
				margin: 0px;
				position: relative;
			}

			ul li {
				list-style: none;
				width: 82px;
				height: 40px;
				line-height: 40px;
				background-color: rgba(0, 0, 255, 0.3);
				box-shadow: 1px 2px 3px rgba(85, 0, 127, 0.3);
				text-align: center;
				border-radius: 30px;
				transition: all .6s;
				cursor: pointer;
			}

			ul li a {
				text-decoration: none;
				color: #ffffff;
				font-weight: 500;
			}

			.mybottom {
				width: 82px;
				height: 10px;
				border-radius: 30px;
				background: linear-gradient(to right, #55aaff, #55aaff);
				position: absolute;
				bottom: 1px;
				transition: all .3s;
				opacity: 0;
				animation: mybottombgcolor 1.5s infinite linear;
			}

			@keyframes mybottombgcolor {
				from {
					background: #55aaff;
				}

				33.3% {
					background: #aaff7f;
				}

				66.6% {
					background: #00aaff;
				}

				to {
					background: #55aaff;
				}
			}

			.mybg {
				background-color: #55aaff;
			}
			
			.bignav{
				position: fixed;
				right: 10px;
			}

			.smallnav {
				width: 150px;
				height: 220px;
				position: fixed;
				right: 10px;
			}

			.unfold {
				width: 88px;
				height: 40px;
				background-color: #55aaff;
				box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.4);
				border-radius: 20px;
				position: absolute;
				right: 0;
				top: 0;
				color: #ffffff;
				line-height: 40px;
				text-align: center;
				cursor: pointer;
				font-size: 1.1em;
			}

			.home a,
			.show a,
			.suggest a,
			.about a,
			.more a {
				text-decoration: none;
				color: #ffffff;
			}

			.home,
			.show,
			.suggest,
			.about,
			.more {
				width: 88px;
				height: 40px;
				background-color: #55aaff;
				box-shadow: 1px 2px 3px rgba(85, 0, 127, 0.3);
				position: absolute;
				font-size: 0.1em;
				color: white;
				cursor: pointer;
				line-height: 40px;
				text-align: center;
				border-radius: 20px;
				display: none;
				font-size: 1.1em;
				right: 0;
			}

			.home {
				top: 45px;
			}

			.show {
				top: 90px;
			}

			.suggest {
				top: 135px;
			}

			.about {
				top: 180px;
			}

			.more {
				top: 225px;
			}

JS：

                $(document).ready(function() {			
				function myresize(){
					if (window.innerWidth <= 666) {
						$('.bignav').hide();
						$('.smallnav').show();
						$('.home,.show,.suggest,.about,.more').hide();
					} else {
						$('.bignav').show();
						$('.smallnav').hide();
					}
				}
				myresize();
				$(window).resize(myresize);
				
				$('.first').addClass('mybg');
				$('li').on({
					mouseout: function() {
						$('.mybottom').css({
							opacity: 0
						});
					},
					mouseover: function() {
						$('.mybottom').css({
							left: $(this).position().left + 'px',
							opacity: 1
						});
					},
					click: function() {
						$(this).siblings().removeClass('mybg');
						$(this).addClass('mybg');
					}
				});
				$('.unfold').on({
					click: function() {
						$('.home,.show,.suggest,.about,.more').slideToggle();
					}
				});
			});