Q

HOME

Hello There!
This is really cool, isn't it?
LOL! Enough of show-off...
I've made this real simple menu only with HTML and CSS3. You don't need any heavy jQuery libraries or JavaScript
to run any kind of effects used in this menu.
You can look out for the browser support.
<- Here

CODE

This is all you need to get this menu work.
DOWNLOAD


<div class="neonize_me_nu_wrapper">  <!--Wrapper div is not required--> 
  <ul class="neonize_me_nu">
    <li><a href="#" class="current_tab"><span></span>HOME<span></span></a></li>
    <li><a href="#"><span></span>ABOUT US<span></span></a></li>
    <li><a href="#"><span></span>OUR WORK<span></span></a></li>
    <li><a href="#"><span></span>CONTACT<span></span></a></li>
  </ul>
</div>


/* Neonize Menu Starts*/
.neonize_me_nu_wrapper {	/* Use this only if you are using wrapper div */
	position: relative;
}
  
.neonize_me_nu {
	list-style-type: none;
	list-style-position: inside;
}
  
.neonize_me_nu li {
	display: inline-block;	/* Make the tabs inline */
	margin-right: 40px;	/* Leaving space between tabs */
}
  
.neonize_me_nu li a {
	color: #FFE900;
	font-family: 'digital-7regular';	/* I've packed these fonts
						in the download pack */
	font-size: 35px;
	opacity: .7;
	text-decoration: none;
	outline: 0;
	line-height: 40px;
}
  
.neonize_me_nu li a span  {
	display: block;
	height: 2px;
	width: 0;
	transition: width .5s;
	-moz-transition: width .5s;
	-webkit-transition: width .5s;
	-o-transition: width .5s;
	background-color: #fff;
	box-shadow: 0 0 10px #fff;
}
  
.neonize_me_nu li a span:nth-child(2)  {
	float: right;
}
  
.neonize_me_nu li a:hover span:nth-child(1), 
.neonize_me_nu li a:hover span:nth-child(2) {
	width: 100%;
}
  
.current_tab, .neonize_me_nu li a:hover {
	color: #ffffff !important;
	text-shadow: 0 0 10px #FFE900, 0 0 20px #FFE900, 0 0 30px #FFE900;
	opacity: 1 !important;
}

DEMO

FEATURES
  • Change on hover effects.
  • Can use different color combinations for text, text-shadow as well as the on hover lines.
  • Set Transition speeds differently for each tab
I've already used NEONIZE ME-NU for this website but I would like to show you the demo here with another color.... mmmmmmm will be going with a Yellow one ;)....

DEMO

CONTACT

Name
E-Mail
Message

Currently Disabled, contact me at firekillz[at]gmail[dot]com

©
Creative Commons License