JSFiddle - React, Tailwind, and code Playground

CSS3 navbar with Responsive Collaps

by Jennifer Perrin

HTML

<header style="width: 80%; margin: 0px auto;">
		<nav class="fixed-top">
			<div class="nav-container">
				<ul class="nav-menu slideDown w-divider">
					<li> <a href="#">Home</a> </li>
					<li class="nav-dropdown"> 
						<a href="#">About <span class="s-button s-collapse-trigger" href="#">+</span></a>
						<ul>
							<li>
								<a href="#">Sub Item 1 <span class="s-button s-collapse-trigger" href="#">+</span></a> 
								<ul>
									<li><a href="#">Sub Item 1</a></li>
									<li>
										<a href="#">Sub Item 2 <span class="s-button s-collapse-trigger" href="#">+</span></a>
										<ul>
											<li><a href="#">Sub Item 1</a></li>
											<li><a href="#">Sub Item 2</a></li>
											<li><a href="#">Sub Item 3</a></li>
											<li><a href="#">Sub Item 4</a></li>
											<li><a href="#">Sub Item 5</a></li>						
										</ul>															
									</li>
									<li><a href="#">Sub Item 3</a></li>
									<li><a href="#">Sub Item 4</a></li>
									<li><a href="#">Sub Item 5</a></li>						
								</ul>						
							</li>
							<li><a href="#">Sub Item 2</a></li>
							<li><a href="#">Sub Item 3</a></li>
							<li><a href="#">Sub Item 4</a></li>
							<li><a href="#">Sub Item 5</a></li>						
						</ul>	
					</li>
					<li> <a href="#">Action</a> </li>
					<li> <a href="#">Research</a> </li>
					<li> <a href="#">More</a> </li>				
				</ul>		
				
				<a class="s-button s-collapse-trigger" href="#">+</a>
			</div>	
		</nav>
	</header>
	
	<div style="width: 100%;clear: both; padding: 30px;"></div>
	
	
	<header style="width: 80%; margin: 0px auto;">
		<nav class="dark w-shadow">
			<div class="nav-container">
				<ul class="nav-menu slideUp w-divider">
					<li> <a href="#">Home</a> </li>
					<li class="nav-dropdown"> 
						<a href="#">About <span class="s-button s-collapse-trigger" href="#">+</span></a>
						<ul>
							<li>
								<a href="#">Sub Item 1 <span class="s-button s-collapse-trigger" href="#">+</span></a>...

CSS

body {
    margin: 0;
    color: #333333;
	overflow-x: hidden;
}


/* buttons */

.s-button,
.s-button:hover{	
	-webkit-transition: all 150ms ease-in-out;
	-moz-transition: all 150ms ease-in-out;
	-ms-transition: all 150ms ease-in-out;
	-o-transition: all 150ms ease-in-out;
	transition: all 150ms ease-in-out;	
}	

.s-button{
	padding: 8px 12px;
	font-size: 1.5em;
	text-decoration: none;
	-webkit-border-radius: 3px; 
	-moz-border-radius: 3px; 
	-o-border-radius: 3px; 
	border-radius: 3px;
	font-weight: 1000px;
	background: #eee;
	text-shadow: 0px 1px 1px #fff; 
	border: 1px solid rgba(0, 0, 0, .2);
	color: rgba(1 ,1 , 1, .6);		
	-webkit-box-shadow: inset 0 2px  5px rgba( 0, 0, 0, .1), 0px 1px 1px rgba( 0, 0, 0, .1);
	  -moz-box-shadow: inset 0 2px 5px rgba( 0, 0, 0, .1), 0px 1px 1px rgba( 0, 0, 0, .1);
		box-shadow: inset 0 2px 5px rgba( 0, 0, 0, .1), 0px 1px  1px rgba( 0, 0, 0, .1);	
}

.s-button:hover,
.s-button.default:hover{
	text-decoration: none;
	color: rgba(1 ,1 , 1, 1);	
	border-top: 1px solid rgba(0, 0, 0, .15);
	border-bottom: 1px solid rgba(0, 0, 0, .15);	
	-webkit-box-shadow: inset 0 2px  5px rgba( 0, 0, 0, .1), 0px 1px 1px rgba( 0, 0, 0, .7), 0px 0px 5px rgba( 0, 0, 0, .05);
	  -moz-box-shadow: inset 0 2px 5px rgba( 0, 0, 0, .1), 0px 1px 1px rgba( 0, 0, 0, .7), 0px 0px 5px rgba( 0, 0, 0, .05);
		box-shadow: inset 0 2px 5px rgba( 0, 0, 0, .1), 0px 1px  1px rgba( 0, 0, 0, .7), 0px 0px 5px rgba( 0, 0, 0, .05);		
}

.s-button:active,
.s-button.active{
	color: rgba(1 ,1 , 1, .6);		
	border: 1px solid rgba(0, 0, 0, .2);
	border-top:  1px solid rgba(0, 0, 0, .3);
	border-bottom:  1px solid rgba(0, 0, 0, .3);	
	-webkit-transition: all 50ms ease-in-out;
	-moz-transition: all 50ms ease-in-out;
	-ms-transition: all 50ms ease-in-out;
	-o-transition: all 50ms ease-in-out;
	transition: all 50ms ease-in-out;		
	-webkit-box-shadow: inset 0 2px  5px rgba( 0, 0, 0, .3), inset 0px 0px  15px rgba( 0, 0, 0, .05);
	  -moz-box-shadow: inset 0 2px 5px rgba( 0, 0, 0, .3),...

JavaScript

(function($){
 
    $.fn.extend({
		
        navResponsive: function() {
 
            return this.each(function() {
				var nav = $(this);
		
				// s-collapse menu items
		
				nav.find('.nav-menu').find('li a').on('click',function(e){
					var ul = $(this).siblings('ul');
					if(ul.length){ e.preventDefault(); }
					if($(this).closest('nav').hasClass('s-collapse'))
					{
						ul.find('ul').hide();
						ul.find('a .s-collapse-trigger').removeClass('active').text('+');
						if(ul.is(':hidden')){ $(this).find('.s-collapse-trigger').addClass('active').text('-'); }
						else{ $(this).find('.s-collapse-trigger').removeClass('active').text('+'); }
						ul.slideToggle(100);		
					}	
				});
				
				/* s-collapse entire menu */
				
				nav.find('.s-collapse-trigger').click(function(e){
					e.preventDefault();
					var nav = $(this).siblings('.nav-menu');
					if(nav.is(':hidden')){ $(this).addClass('active').text('-'); }
					else{ $(this).removeClass('active').text('+'); } 
					$(this).siblings('.nav-menu').slideToggle();
				});
				
				/* set s-collapse based on nav size */
				
				var defaultWidth = 0;
				nav.find('.nav-menu').each(function(){
					defaultWidth += $(this).outerWidth();
				});	
				if(nav.innerWidth() < defaultWidth + 150){
					nav.addClass('s-collapse'); 
					nav.find('.nav-menu').slideUp(500);
				}
				
				$(window).resize(function(){
					var el = nav.find('.nav-menu');
					if(nav.innerWidth() < defaultWidth + 150)
					{
						if(!nav.hasClass('s-collapse'))
						{
							nav.addClass('s-collapse', 300);
							el.find('ul').hide();
							el.hide();
							nav.find('.s-collapse-trigger').removeClass('active').text('+');
						}	
					}
					else
					{
						if(nav.hasClass('s-collapse'))
						{
							nav.find('.s-collapse-trigger:last').addClass('active').text('-');		
							nav.removeClass('s-collapse', 300);			
							el.find('ul').show();
							el.fadeIn();					
						}	
					}
				});
			
            });
       ...