show hide top menu

Bootstrap snippet. show hide top menu, this snippet was created to help web designers,
front-end developers and back-end developer save time. Use it in your project and build your app faster,
You can also download the HTML, CSS, and JS code.
tags: menu,show hide

HTML code

Copy, paste, change, customize and run the following HTML code to get a result like the one shown in the preview selection

<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" rel="stylesheet">
<div class="row">
        <!-- sh menu -->
		<div class="sh-menu">
			<!--  head -->
			<div class="sh-head">
				<!-- Button -->
				<a href="#" class="bg-lblue">Menu</a>
			</div>
			<!--  content -->
			<div class="sh-content bg-lblue">
				<div class="container-fluid">
					<div class="row">
						<div class="col-md-2 col-sm-2 col-xs-4">
							<!--  item -->
							<div class="sh-item">
								<!-- Image -->
								<a href="#"><i class="fa fa-paint-brush fa-4x"></i></a>
								<!-- Heading -->
								<h6><a href="#">Brush</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<!-- UI iteme -->
							<div class="sh-item">
								<!-- Image -->
								<a href="#"><i class="fa fa-weixin fa-4x"></i></a>
								<!-- Heading -->
								<h6><a href="#">Chat</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-area-chart fa-4x"></i></a>
								<h6><a href="#">Crown</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-diamond fa-4x"></i></a>
								<h6><a href="#">Diamond</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-map-marker fa-4x"></i></a>
								<h6><a href="#">Location</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-search fa-4x"></i></a>
								<h6><a href="#">Search</a></h6>
							</div>
						</div>
					</div>
					<div class="row">
						<div class="col-md-2 col-sm-2 col-xs-4">
							<!-- UI item -->
							<div class="sh-item">
								<!-- Image -->
								<a href="#"><i class="fa fa-cogs fa-4x"></i></a>
								<!-- Heading -->
								<h6><a href="#">Setting</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<!-- UI item -->
							<div class="sh-item">
								<!--Image -->
								<a href="#"><i class="fa fa-bars fa-4x"></i></a>
								<!-- Heading -->
								<h6><a href="#">Status</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-phone-square fa-4x"></i></a>
								<h6><a href="#">Support</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-user fa-4x"></i></a>
								<h6><a href="#">User</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-archive fa-4x"></i></a>
								<h6><a href="#">Archive</a></h6>
							</div>
						</div>
						<div class="col-md-2 col-sm-2 col-xs-4">
							<div class="sh-item">
								<a href="#"><i class="fa fa-book fa-4x"></i></a>
								<h6><a href="#">Books</a></h6>
							</div>
						</div>
					</div>
				</div>
			</div><!-- /content -->
		</div><!-- /sh menu -->
</div>                                

CSS code

Copy, paste, change, customize and run the following CSS code to get a result Like the one shown in the preview selection

@import url('http://fonts.googleapis.com/css?family=Open+Sans:300,400italic,400,600');
/* General */
.sh-menu .fa{
    margin-top:15px;    
}

.sh-content{
    margin-top:-10px;    
}

.sh-item:hover{
   opacity: 0.7;
    cursor: pointer;
    border-radius: 0px;
  -webkit-transform: scale(1.2, 1.2);
  -webkit-transition-timing-function: ease-out;
                      -moz-transform: scale(1.2, 1.2);
     -moz-transition-timing-function: ease-out;
                       -ms-transform: scale(1.20, 1.20);
      -ms-transition-timing-function: ease-out;

         -webkit-transition-duration: 500ms;
            -moz-transition-duration: 500ms;
             -ms-transition-duration: 500ms; 
}
.sh-item:hover .fa{
    color:#39bbdb;    
}


body {
    color: #666666;
    font-size: 13px;
	line-height: 23px;
	background: #fff;
	border-top:3px solid #32c8de;
	font-family: 'Open Sans', sans-serif;
	-webkit-font-smoothing: antialiased;
}
h1,
h2,
h3,
h4,
h5,
h6 {
	color: #666;
	font-family: 'Open Sans', sans-serif;
	font-weight: 600;
	margin: 2px 0px;
	padding: 0px;
}
h1 {
	font-size: 30px;
	line-height: 45px;
}
h2 {
	font-size: 25px;
	line-height: 40px;
}
h3 {
	font-size: 22px;
	line-height: 37px;
}
h4 {
	font-size: 18px;
	line-height: 33px;
}
h5 {
	font-size: 15px;
	line-height: 30px;
}
h6 {
	font-size: 13px;
	line-height: 28px;
}
p {
	margin: 2px 0px;
	padding: 0px;
	line-height:28px;
	margin-bottom:5px;
}
a{
	text-decoration: none;
	color: #777;
}
a:hover{
    text-decoration: none;  
}

.bg-lblue {
  background-color: #32c8de !important;
}
.bg-blue {
  background-color: #609cec !important;
}


.br-lblue {
  border: 1px solid #32c8de;
}
.br-blue {
  border: 1px solid #609cec;
}


/*sh menu */
/*  head */
.sh-menu .sh-head{
	position:fixed;
	width:100%;
}
/* Button */
.sh-menu .sh-head a{
	padding:5px 0px;
	text-align:center;
	color:#fff;
	display:block;
	width:70px;
	margin:0 auto;
	border-bottom-left-radius:3px;
	border-bottom-right-radius:3px;
	font-weight:600;
	text-transform:uppercase;
	border:1px solid rgba(0,0,0,0.05);
	position:relative;
	top:-4px;
}
/* content */
.sh-menu .sh-content{
	padding:50px 10px;
	display:none;
}
/*  item */
.sh-menu .sh-content .sh-item{
	height:110px;
	width:110px;
	border-radius:100%;
	margin:20px auto;
	background:#fff;
	text-align:center;
	box-shadow:inset 0px 0px 15px rgba(0,0,0,0.3);
	border:2px solid #fff;
}
@media(max-width:767px){
	.sh-menu .sh-content .sh-item{
		background: transparent;
		height: 70px;
		width: 70px;
		box-shadow: none;
		border:0px;
	}
	.sh-item h6 a{
		color:#fff;
	}
}
/* Image */
.sh-menu .sh-content .sh-item  img{
	max-width:40px;
	margin:0 auto;
	margin-top:20px;
}                                
                                    

Javascript/Jquery code

Copy, paste, change, customize and run the following JS code to get a result Like the one shown in the preview selection

//Slideup and slidedown
$(document).ready(function(){
	$(".sh-head a").click(function(){
			/* Variable */
			var content = $(".sh-content");
			if(content.hasClass("open")){
				content.removeClass("open");
				content.slideUp(300);
			}
			else{
				content.slideDown(300);
				content.addClass("open");
			}
		});	
	});
		                                 

Similar snippets

Bootstrap snippet bs4 navbar with dropdown animations

bs4 navbar with dropdown animations

View

Bootstrap snippet news feed sidebaser with online users

news feed sidebaser with online users

View

Bootstrap snippet Floating menu

Floating menu

View

About this snippet

Creator: Dey Dey

Bootstrap version: 3.3.4

Created: May 25th 2015, 15:42

Views: 5.3K

Rated 5/5 based on 8 reviews