<!--
	This is just the markup for the nav style selector.
	Ignore it.
-->
<ul class="navSelect clearfix">
	<li>Select a nav style:</li>
	<li class="selected"><a href="nav1">Basic Nav</a></li>
	<li><a href="nav2">Sliding Nav</a></li>
	<li><a href="nav3">Fading Nav</a></li>
	<li><a href="nav4">Sliding Panel Nav</a></li>
	<li><a href="nav5">3D Flap Nav</a></li>
</ul>

<!--
	This is the markup for the actual nav. Pretty standard.
	You'll need to merge the .nav styles with the .navN
	styles for the menu type you want (obviously).
	
	This menu is super basic, but all of the menu styles
	are adaptable so they'll work no matter how large or
	small your menu is (though you may need to change the
	max-height/max-width values in the CSS).
-->
<ul class="nav nav1 clearfix">
	<li><a href="index.html">Home</a></li>
	<li><a href="about.html">About</a>
		<ul>
			<li><a href="about.html#company">Company</a></li>
			<li><a href="about.html#team">Team</a></li>
		</ul>
	</li>
	<li><a href="contact.html">Contact</a></li>
</ul>

/*
	General and Nav Select Styling (ignore this)
*/
@import https://fonts.googleapis.com/css?family=Ubuntu;

body{
	font-family:Ubuntu, sans-serif;
	padding:20px;
}

*{box-sizing:border-box}

.navSelect{margin-bottom:20px}

.navSelect li{
	display:block;
	float:left;
	line-height:2em;
	margin-right:10px;
}

.navSelect li a{
	background:#fff;
	border:1px solid #000;
	border-radius:2px;
	color:#000;
	display:block;
	float:left;
	margin-right:10px;
	padding:0 10px;
	text-decoration:none;
	transition:all .2s;
}

.navSelect li a:hover{
	box-shadow:0 0 6px 2px rgba(0,0,0,0.7);
}

.navSelect li.selected a{
	background:#000;
	color:#fff;
}

.clearfix:after{
	clear:both;
	content:'';
	display:block;
	height:0;
}

/*
	General nav styling just to make the demo menus easier
	on the eyes.
*/
.nav{
	background:transparent;
	list-style:none;
}

.nav > li{
	display:block;
	float:left;
}

.nav li a{
	border-left:2px solid #000;
	color:#000;
	display:block;
	padding:10px 40px 10px 10px;
	text-decoration:none;
}

/*
	Now we're getting started. We'll use display:none; to
	hide the submenus just like your typical CSS dropdowns,
	though we'll override it in all of the fancy menus.
*/
.nav li ul{
	background-color:#000;
	display:none;
	position:absolute;
}

.nav li ul a{
	color:#fff;
}

.nav li:hover{
	background-color:#000;
}

.nav li:hover a{
	color:#fff;
}

/*
	Again, pretty standard. Just set the submenus to 
	display:block; when you hover over the parent element.
*/
.nav li:hover ul{
	display:block;
}

/*
	I set white-space:nowrap; on my submenu links so that
	no matter how long they get, they won't wrap to multiple
	lines. It's just a personal preference.
*/
.nav li li{
	white-space:nowrap;
}

/*------------------------------------*\
	Basic Nav
\*------------------------------------*/
.nav1{
	overflow:hidden;
}

/*------------------------------------*\
	Slide In Nav
\*------------------------------------*/
/*
	More standard stuff. Set overflow:hidden; to prevent
	submenu items from showing up outside of their hidden
	container.
*/
.nav2{
	overflow:hidden;
}

/*
	Hey, this is new! Transitions! We're just changing the
	background-color this time, but we'll get a little more
	wild in a few lines.
*/
.nav2 > li{
	background-color:transparent;
	transition:background-color .4s .4s;
}

.nav2 li a {
	transition:all .4s .4s;
}

/*
	There it is! Like I mentioned earlier, we're overriding the
	display setting so that it doesn't cause any issues with
	our transition. We're using max-height to open the menu
	downward when you hover its parent.
	
	We could use the height property instead but then we would
	need to know the exact height of our submenus. max-height
	allows us to stretch our submenus as little as we need,
	unless they're taller than our max-height number.
	
	One other consideration with this method is that the larger
	your max-height value, the quicker your transition will
	occur. When the parent is hovered, the submenu will pseudo
	stretch to the max-height value. That means your element
	will act like it's max-height value tall but you'll only be
	able to see the submenu at its actual height.
	
	The last thing to notice is that we're setting the delay
	here to 0. The transition is used as the INCOMING animation
	for this selector. In other words, setting a delay of 0 on
	our element's :hover state means that when the element is
	hovered, the transition will happen immediately. However if
	the initial state has a delay of 1s, the transition won't
	happen until 1 second AFTER you have moved your cursor away
	from the element. This may seem a bit backwards at first,
	but you'll get used to it.
*/
.nav2 li ul{
	display:block;
	max-height:0;
	overflow:hidden;
	transition:max-height .4s 0;
}

.nav2 li:hover{
	background-color:#000;
	transition:background-color .4s 0;
}

.nav2 li:hover a {
	transition:all .4s 0;
}

.nav2 li:hover ul{
	display:block;
	max-height:500px;
	transition:max-height .4s .4s;
}

/*------------------------------------*\
	Fade In Nav
\*------------------------------------*/
.nav3{
	overflow:hidden;
}

.nav3 > li{
	background-color:transparent;
	transition:background-color .4s 0;
}

.nav3 li a {
	transition:all .4s 0;
}

/*
	Our fading menu is almost identical to our sliding menu. The
	main difference is that we're also transitioning the opacity
	property. However, look a little more closely at the max-height
	transition. We're making it happen immediately by setting the
	:hover effects incoming transition duration and delay to 0. On
	the initil state, we leave the transition duration at 0 but
	delay it for .4s.
	
	Since we can't use the display property to show and hide the
	submenu (we wouldn't see our effects if we did) we have to use
	the max-height value. Setting the duration to 0 eliminates the
	animation but setting the delay allows us to control whether
	the max-height happens before or after the opacity transition.
	We'll use this technique for the other menus as well.
*/
.nav3 li ul{
	display:block;
	max-height:0;
	opacity:0;
	overflow:hidden;
	transition:
		max-height 0 .4s,
		opacity .4s 0;
}

.nav3 li:hover{
	background-color:#000;
}

/*
	Note the the opacity property is a value STRICTLY between 0.0
	and 1.0. Some people set opacity on a 1 to 100 scale, but
	using values over 1.0 can be unpredictable.
*/
.nav3 li:hover ul{
	max-height:200px;
	opacity:1;
	transition:
		max-height 0 0,
		opacity .4s 0;
}

/*------------------------------------*\
	Sliding Panel Nav
		Check out my transition chaining pen for a primer
		to help understand this menu:
		https://cdpn.io/fxIle
\*------------------------------------*/
.nav4{
	overflow:hidden;
}

.nav4 > li{
	background-color:transparent;
	transition:background-color .2s .8s;
}

.nav4 li a {
	transition:all .2s .8s;
}

.nav4 li ul{
	display:block;
	max-height:0;
	max-width:4px;
	overflow:hidden;
	transition:
		max-height .4s .4s,
		max-width .4s 0;
}

.nav4 li:hover{
	background-color:#000;
	transition:background-color .2s 0;
}

.nav4 li:hover a {
	transition:all .2s 0;
}

.nav4 li:hover ul{
	max-height:200px;
	max-width:100px;
	transition:
		max-height .4s .2s,
		max-width .4s .6s;
}

/*------------------------------------*\
	3D Flap Nav
\*------------------------------------*/
/*
	Now we're getting wild. First we need to set the perspective of
	the menu's parent so the 3D effect really looks good. We also
	set the perspective-origin to the bottom-right of the container
	to give the menu's effect more depth.
*/
.nav5 > li{
	perspective:600px;
	perspective-origin:100% 100%;
	transition:all .2s .4s;
}

.nav5 li a {
	transition:all .2s .4s;
}

/*
	We're setting the transform-origin (kind of like an anchor point)
	to the top left of the menu so it acts like a hinge attached to
	the parent menu. Then we set the initial state of the menu to be
	flipped up behind the parent menu.
*/
.nav5 li ul{
	display:block;
	transform:rotateX(-90deg);
	transform-origin:0 0 0;
	transition:all .4s 0;
}

.nav5 li:hover{
	transition:all .2s 0;
}

.nav5 li:hover a {
	transition:all .2s 0;
}

/*
	On :hover we just drop the menu down to its original, upright
	position.
*/
.nav5 li:hover ul{
	transform:rotateX(0);
	transition:all .4s 0;
}

/*
	All of this Javascript is superfluous to the actual
	dropdown menus. All it does is enable functionality
	for changing the nav style.
*/
$(document).ready(function(){
	$('.navSelect').find('a').click(function(){
		event.preventDefault()
		
		$('.navSelect').find('.selected').removeClass('selected')
		$(this).parent().addClass('selected')
		
		$('.nav').removeClass(function(i,c){
			return (c.match (/nav\d/g) || []).join(' ')
		}).addClass($(this).attr('href'))
	})
})