Beautiful Dropdown And Animated Menu Bar And Tab coding For website - Website Design
Animated Menu Bar For Website.Animated Menubar Codes Given
Bellow Html, CSS and JavaScript Codes Past To Your Website Html Source
where you What To Show Menubar and Create Beautiful
Website Design.
To insert HTML code into any page on your web
site, open your web page on which you want to place the HTML code in the
Pages Editor. Place your cursor in the content where you want the HTML code
to appear on the page and then Paste your HTML code in the window which
appears and click "OK". and Click on save Button.
There are three methods of including CSS in an HTML document:
- Inline styles — Using the style attribute in the HTML start tag.
- Embedded styles — Using the <style> element in the head section of a document.
- External style sheets — Using the <link> element, pointing to an external CSS file.
The <script> tag can be placed in the <head> section of your HTML or in the <body> section, depending on when you want the JavaScript to load.
Generally, JavaScript code can go inside of the document <head> section in order to keep them contained and out of the main content of your HTML document.
Animated Menu Bar Html Code
Animated Menu Bar CSS Code
Animated Menu Bar CSS Code JAVASCRIPT
Simple Pure CSS Drop Down Menu
Simple Drop Down Menu HTML
<nav id="primary_nav_wrap">
<ul>
<li
class="current-menu-item"><a href="#">Home</a></li>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub Menu
1</a></li>
<li><a
href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a>
<ul>
<li><a href="#">Deep Menu 1</a>
<ul>
<li><a href="#">Sub Deep 1</a></li>
<li><a href="#">Sub
Deep 2</a></li>
<li><a href="#">Sub Deep 3</a></li>
<li><a
href="#">Sub Deep 4</a></li>
</ul>
</li>
<li><a
href="#">Deep Menu 2</a></li>
</ul>
</li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a
href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a
href="#">Menu 3</a>
<ul>
<li class="dir"><a href="#">Sub Menu
1</a></li>
<li class="dir"><a
href="#">Sub Menu 2 THIS IS SO LONG IT MIGHT CAUSE AN ISSEUE BUT MAYBE
NOT?</a>
<ul>
<li><a href="#">Category
1</a></li>
<li><a href="#">Category 2</a></li>
<li><a href="#">Category
3</a></li>
<li><a href="#">Category 4</a></li>
<li><a href="#">Category
5</a></li>
</ul>
</li>
<li><a
href="#">Sub Menu 3</a></li>
<li><a href="#">Sub Menu 4</a></li>
<li><a href="#">Sub Menu 5</a></li>
</ul>
</li>
<li><a
href="#">Menu 4</a></li>
<li><a
href="#">Menu 5</a></li>
<li><a
href="#">Menu 6</a></li>
<li><a
href="#">Contact Us</a></li>
</ul>
</nav>
Simple Drop Down Menu CSS
#primary_nav_wrap
{
margin-top:15px
}
#primary_nav_wrap ul
{
list-style:none;
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul a
{
display:block;
color:#333;
text-decoration:none;
font-weight:700;
font-size:12px;
line-height:32px;
padding:0
15px;
font-family:"HelveticaNeue","Helvetica Neue",Helvetica,Arial,sans-serif
}
#primary_nav_wrap
ul li
{
position:relative;
float:left;
margin:0;
padding:0
}
#primary_nav_wrap ul li.current-menu-item
{
background:#ddd
}
#primary_nav_wrap ul li:hover
{
background:#f6f6f6
}
#primary_nav_wrap ul ul
{
display:none;
position:absolute;
top:100%;
left:0;
background:#fff;
padding:0
}
#primary_nav_wrap ul ul li
{
float:none;
width:200px
}
#primary_nav_wrap ul ul a
{
line-height:120%;
padding:10px
15px
}
#primary_nav_wrap ul ul ul
{
top:0;
left:100%
}
#primary_nav_wrap ul li:hover > ul
{
display:block
}
bootstrap dropdown hover menu
create Beautiful Dropdown Menu using Html CSS and Javascript
bootstrap dropdown hover menu HTML
<div class="body-wrap">
<div class="container">
<nav class="navbar navbar-inverse"
role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button"
class="navbar-toggle" data-toggle="collapse"
data-target="#bs-example-navbar-collapse-1">
<span
class="sr-only">Toggle navigation</span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
<span
class="icon-bar"></span>
</button>
<a class="navbar-brand"
href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and
other content for toggling -->
<div class="collapse navbar-collapse"
id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav">
<li class="active"><a
href="#">Link</a></li>
<li><a
href="#">Link</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul
class="dropdown-menu">
<li><a
href="#">Action</a></li>
<li><a
href="#">Another action</a></li>
<li><a
href="#">Something else here</a></li>
<li
class="divider"></li>
<li><a
href="#">Separated link</a></li>
<li
class="divider"></li>
<li><a
href="#">One more separated link</a></li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav
navbar-right">
<li><a
href="#">Link</a></li>
<li class="dropdown">
<a href="#"
class="dropdown-toggle" data-toggle="dropdown">Dropdown <b
class="caret"></b></a>
<ul
class="dropdown-menu">
<li><a
href="#">Action</a></li>
<li><a
href="#">Another action</a></li>
<li><a
href="#">Something else here</a></li>
<li
class="divider"></li>
<li><a
href="#">Separated link</a></li>
</ul>
</li>
</ul>
</div>
<!-- /.navbar-collapse -->
</div>
<!-- /.container-fluid -->
</nav>
</div>
</div>
bootstrap dropdown hover menu CSS
<style>
/* bootstrap dropdown hover menu*/
body {
font-family: 'PT Sans', sans-serif;
font-size: 13px;
font-weight: 400;
color: #4f5d6e;
position:
relative;
background: rgb(26, 49, 95);
background:
-webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(26, 49,
95, 1)), color-stop(10%, rgba(26, 49, 95, 1)), color-stop(24%, rgba(29, 108,
141, 1)), color-stop(37%, rgba(41, 136, 151, 1)), color-stop(77%, rgba(39,
45, 100, 1)), color-stop(90%, rgba(26, 49, 95, 1)), color-stop(100%,
rgba(26, 49, 95, 1)));
filter: progid:
DXImageTransform.Microsoft.gradient( startColorstr='#1a315f',
endColorstr='#1a315f', GradientType=0);
}
.body-wrap {
min-height: 700px;
}
.body-wrap {
position:
relative;
z-index: 0;
}
.body-wrap:before,
.body-wrap:after
{
content: '';
position: absolute;
top:
0;
left: 0;
right: 0;
z-index: -1;
height: 260px;
background: -webkit-gradient(linear, left top,
left bottom, color-stop(0%, rgba(26, 49, 95, 1)), color-stop(100%, rgba(26,
49, 95, 0)));
background: linear-gradient(to bottom, rgba(26,
49, 95, 1) 0%, rgba(26, 49, 95, 0) 100%);
filter: progid:
DXImageTransform.Microsoft.gradient( startColorstr='#1a315f',
endColorstr='#001a315f', GradientType=0);
}
.body-wrap:after {
top: auto;
bottom: 0;
background: linear-gradient(to
bottom, rgba(26, 49, 95, 0) 0%, rgba(26, 49, 95, 1) 100%);
filter: progid: DXImageTransform.Microsoft.gradient(
startColorstr='#001a315f', endColorstr='#1a315f', GradientType=0);
}
nav
{
margin-top: 60px;
box-shadow: 5px 4px 5px #000;
}
</style>
bootstrap dropdown hover menu Javascript
<script>
$('ul.nav li.dropdown').hover(function() {
$(this).find('.dropdown-menu').stop(true, true).delay(200).fadeIn(500);
},
function() {
$(this).find('.dropdown-menu').stop(true,
true).delay(200).fadeOut(500);
});
</script>
Side Sliding Menu
Create Beautiful side Sliding menubar it looks Very Actractive Homepage.
Side Sliding Menu HTML
<!DOCTYPE html><html class="menu">
<html>
<head>
<meta charset="utf-8"/>
<meta http-equiv="X-UA-Compatible" content=="IE=edge"/>
<meta name="google" value="notranslate"/>
<title>Side Menu</title>
<link rel="stylesheet" type="text/css" href="css/menu.css">
<link rel="stylesheet" type="text/css"
href="https://netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css"
rel="stylesheet">
</head>
<body>
</div><nav class="main-menu">
<div>
<a class="logo" href="http://startific.com">
</a>
</div>
<div class="settings"></div>
<div class="scrollbar" id="style-1">
<ul>
<li>
<a href="http://startific.com">
<i class="fa fa-home fa-lg"></i>
<span class="nav-text">Home</span>
</a>
</li>
<li>
<a href="http://startific.com">
<i class="fa fa-user fa-lg"></i>
<span class="nav-text">Login</span>
</a>
</li>
<li>
<a href="http://startific.com">
<i class="fa fa-envelope-o fa-lg"></i>
<span class="nav-text">Contact</span>
</a>
</li>
<li>
<a href="http://startific.com">
<i class="fa fa-heart-o fa-lg"></i>
<span class="share">
<div class="addthis_default_style addthis_32x32_style">
<div style="position:absolute;
margin-left: 56px;top:3px;">
<a href="https://www.facebook.com/sharer/sharer.php?u="
target="_blank" class="share-popup"><img
src="http://icons.iconarchive.com/icons/danleech/simple/512/facebook-icon.png"
width="30px" height="30px"></a>
<a href="https://twitter.com/share" target="_blank"
class="share-popup"><img
src="https://cdn1.iconfinder.com/data/icons/metro-ui-dock-icon-set--icons-by-dakirby/512/Twitter_alt.png"
width="30px" height="30px"></a>
<a
href="https://plusone.google.com/_/+1/confirm?hl=en&url=_URL_&title=_TITLE_
" target="_blank" class="share-popup"><img
src="http://icons.iconarchive.com/icons/danleech/simple/512/google-plus-icon.png"
width="30px" height="30px"></a>
</div>
<script type="text/javascript">var addthis_config =
{"data_track_addressbar":true};</script>
<script type="text/javascript"
src="//s7.addthis.com/js/300/addthis_widget.js#pubid=ra-4ff17589278d8b3a"></script>
</span>
<span class="twitter"></span>
<span class="google"></span>
<span class="fb-like">
<iframe
src="//www.facebook.com/plugins/like.php?href=http%3A%2F%2Ffacebook.com%2Fstartific&width&layout=button&action=like&show_faces=false&share=false&height=35"
scrolling="no" frameborder="0" style="border:none; overflow:hidden;
height:35px;" allowTransparency="true"></iframe>
</span>
<span class="nav-text">
</span>
</a>
</li>
</li>
<li class="darkerlishadow">
<a href="http://startific.com">
<i class="fa fa-clock-o fa-lg"></i>
<span class="nav-text">News</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-desktop fa-lg"></i>
<span class="nav-text">Technology</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-plane fa-lg"></i>
<span class="nav-text">Travel</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-shopping-cart"></i>
<span class="nav-text">Shopping</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-microphone fa-lg"></i>
<span class="nav-text">Film & Music</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-flask fa-lg"></i>
<span class="nav-text">Web Tools</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-picture-o fa-lg"></i>
<span class="nav-text">Art & Design</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-align-left fa-lg"></i>
<span class="nav-text">Magazines
</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-gamepad fa-lg"></i>
<span class="nav-text">Games</span>
</a>
</li>
<li class="darkerli">
<a href="http://startific.com">
<i class="fa fa-glass fa-lg"></i>
<span class="nav-text">Life & Style
</span>
</a>
</li>
<li class="darkerlishadowdown">
<a href="http://startific.com">
<i class="fa fa-rocket fa-lg"></i>
<span class="nav-text">Fun</span>
</a>
</li>
</ul>
<li>
<a href="http://startific.com">
<i class="fa fa-question-circle fa-lg"></i>
<span class="nav-text">Help</span>
</a>
</li>
<ul class="logout">
<li>
<a href="http://startific.com">
<i class="fa fa-lightbulb-o fa-lg"></i>
<span class="nav-text">
BLOG
</span>
</a>
</li>
</ul>
</nav>
</body>
</html>
Side Sliding Menu CSS
<style>
body
{
margin:0px;
padding:0px;
font-family: "Open Sans",
arial;
background:url('https://static.tumblr.com/94eb957a00fd03c0c2f7d26decd71578/u1rhacw/osAmyyh1q/tumblr_static_tumblr_static_gaussian_blur_gradient_desktop_1680x943_wallpaper-393751.jpg');
color:#fff;
font-weight:300;
}
@import
url(//netdna.bootstrapcdn.com/font-awesome/4.0.3/css/font-awesome.css);
}
@import
url(https://fonts.googleapis.com/css?family=Titillium+Web:300);
.logo{
}
.settings {
height:73px;
float:left;
background:url(
https://s3.postimg.org/bqfooag4z/startific.jpg);
background-repeat:no-repeat;
width:250px;
margin:0px;
text-align: center;
font-size:20px;
font-family: 'Strait', sans-serif;
}
/* ScrolBar */
.scrollbar
{
height: 90%;
width: 100%;
overflow-y: hidden;
overflow-x: hidden;
}
.scrollbar:hover
{
height: 90%;
width: 100%;
overflow-y: scroll;
overflow-x: hidden;
}
/* Scrollbar Style */
#style-1::-webkit-scrollbar-track
{
border-radius: 2px;
}
#style-1::-webkit-scrollbar
{
width: 5px;
background-color: #F7F7F7;
}
#style-1::-webkit-scrollbar-thumb
{
border-radius: 10px;
-webkit-box-shadow: inset 0 0 6px rgba(0,0,0,.3);
background-color: #BFBFBF;
}
/* Scrollbar End */
.fa-lg {
font-size: 1em;
}
.fa {
position: relative;
display: table-cell;
width: 55px;
height: 36px;
text-align: center;
top:12px;
font-size:20px;
}
.main-menu:hover, nav.main-menu.expanded {
width:250px;
overflow:hidden;
opacity:1;
}
.main-menu {
background:#F7F7F7;
position:absolute;
top:0;
bottom:0;
height:100%;
left:0;
width:55px;
overflow:hidden;
-webkit-transition:width .2s linear;
transition:width .2s linear;
-webkit-transform:translateZ(0) scale(1,1);
box-shadow: 1px 0 15px rgba(0, 0, 0, 0.07);
opacity:1;
}
.main-menu>ul {
margin:7px 0;
}
.main-menu li {
position:relative;
display:block;
width:250px;
}
.main-menu li>a {
position:relative;
width:255px;
display:table;
border-collapse:collapse;
border-spacing:0;
color:#8a8a8a;
font-size: 13px;
text-decoration:none;
-webkit-transform:translateZ(0) scale(1,1);
-webkit-transition:all .14s linear;
transition:all .14s linear;
font-family: 'Strait', sans-serif;
border-top:1px solid #f2f2f2;
text-shadow: 1px 1px 1px #fff;
}
.main-menu .nav-icon {
position:relative;
display:table-cell;
width:55px;
height:36px;
text-align:center;
vertical-align:middle;
font-size:18px;
}
.main-menu .nav-text {
position:relative;
display:table-cell;
vertical-align:middle;
width:190px;
font-family: 'Titillium Web', sans-serif;
}
.main-menu .share {
}
.main-menu .fb-like {
left: 180px;
position:absolute;
top: 15px;
}
.main-menu>ul.logout {
position:absolute;
left:0;
bottom:0;
}
.no-touch .scrollable.hover {
overflow-y:hidden;
}
.no-touch .scrollable.hover:hover {
overflow-y:auto;
overflow:visible;
}
/* Logo Hover Property */
.settings:hover, settings:focus {
background:url(
https://s17.postimg.org/74cl7s05b/logo_hover.jpg);
-webkit-transition: all 0.2s ease-in-out, width 0, height 0, top
0, left 0;
-moz-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left
0;
-o-transition: all 0.2s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.2s ease-in-out, width 0, height 0, top 0, left
0;
}
.settings:active, settings:focus {
background:url(
https://s3.postimg.org/bqfooag4z/startific.jpg);
-webkit-transition: all 0.1s ease-in-out, width 0, height 0, top
0, left 0;
-moz-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left
0;
-o-transition: all 0.1s ease-in-out, width 0, height 0, top 0, left 0;
transition: all 0.1s ease-in-out, width 0, height 0, top 0, left
0;
}
a:hover,a:focus {
text-decoration:none;
border-left:0px solid #F7F7F7;
}
nav {
-webkit-user-select:none;
-moz-user-select:none;
-ms-user-select:none;
-o-user-select:none;
user-select:none;
}
nav ul,nav li {
outline:0;
margin:0;
padding:0;
text-transform: uppercase;
}
/* Darker element side menu Start*/
.darkerli
{
background-color:#ededed;
text-transform:capitalize;
}
.darkerlishadow
{
background-color:#ededed;
text-transform:capitalize;
-webkit-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow: inset 0px 5px 5px -4px rgba(50, 50, 50,
0.55);
box-shadow: inset 0px 5px 5px -4px
rgba(50, 50, 50, 0.55);
}
.darkerlishadowdown
{
background-color:#ededed;
text-transform:capitalize;
-webkit-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50, 0.55);
-moz-box-shadow: inset 0px -4px 5px -4px rgba(50, 50, 50,
0.55);
box-shadow: inset 0px -4px 5px -4px
rgba(50, 50, 50, 0.55);
}
/* Darker element side menu End*/
.main-menu li:hover>a,nav.main-menu
li.active>a,.dropdown-menu>li>a:hover,.dropdown-menu>li>a:focus,.dropdown-menu>.active>a,.dropdown-menu>.active>a:hover,.dropdown-menu>.active>a:focus,.no-touch
.dashboard-page nav.dashboard-menu ul li:hover a,.dashboard-page
nav.dashboard-menu ul li.active a {
color:#fff;
background-color:#00bbbb;
text-shadow: 0px 0px 0px;
}
.area {
float: left;
background: #e2e2e2;
width: 100%;
height: 100%;
}
@font-face {
font-family: 'Titillium Web';
font-style: normal;
font-weight: 300;
src: local('Titillium WebLight'), local('TitilliumWeb-Light'),
url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff)
format('woff');
}
</style>
Simple Menu effect
Simple menu Effect For Website Mein Menu. when moving Mouse Cursor on Menu Tabs A red line Moves To the Bottom To Top.
Simple menu Effect HTML
<nav class="main-nav">
<ul class="main-menu">
<li class="current"><a
href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a
href="#">Contacts</a></li>
<li><a href="#">Account</a></li>
<li><a
href="#">Financial</a></li>
</ul>
</nav>
Simple menu Effect CSS
@import "compass/css3";
$black: #231f20;
$grey: #8f8d8e;
$red:
#e61c38;
$darkgrey: #6b696a;
* {
box-sizing:
border-box;
}
body {
background: $grey;
}
.main-nav
{
margin:0;
padding:0;
height: 44px;
background-color: $black;
border-bottom: 4px solid
#444041;
}
.main-menu {
margin: 0;
padding: 0;
width: 100%;
float: left;
height: 100%;
font-family: FreeSetLightC;
li
{
float: left;
width:
20%;
height: 100%;
border-right:
1px dashed #434243;
border-left: 1px dashed #434243;
overflow: hidden;
a {
position: relative;
display: block;
height: 100%;
text-align: center;
padding-top: 14px;
text-decoration:
none;
color: #FFF;
text-transform: uppercase;
background-repeat: repeat-x;
background-position:
0px 0px;
background-size: 100% 88px;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition:
.3s;
background-image:
url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAABYCAIAAAC79grhAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyRpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuMy1jMDExIDY2LjE0NTY2MSwgMjAxMi8wMi8wNi0xNDo1NjoyNyAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENTNiAoTWFjaW50b3NoKSIgeG1wTU06SW5zdGFuY2VJRD0ieG1wLmlpZDpCRTZCRTNGMzkyRDQxMUUyOTZDRkEwOTJEN0I1OTI2RCIgeG1wTU06RG9jdW1lbnRJRD0ieG1wLmRpZDpCRTZCRTNGNDkyRDQxMUUyOTZDRkEwOTJEN0I1OTI2RCI+IDx4bXBNTTpEZXJpdmVkRnJvbSBzdFJlZjppbnN0YW5jZUlEPSJ4bXAuaWlkOkJFNkJFM0YxOTJENDExRTI5NkNGQTA5MkQ3QjU5MjZEIiBzdFJlZjpkb2N1bWVudElEPSJ4bXAuZGlkOkJFNkJFM0YyOTJENDExRTI5NkNGQTA5MkQ3QjU5MjZEIi8+IDwvcmRmOkRlc2NyaXB0aW9uPiA8L3JkZjpSREY+IDwveDp4bXBtZXRhPiA8P3hwYWNrZXQgZW5kPSJyIj8+45QsCAAAACpJREFUeNpiUJZXYGJgYBgy+PBfCRS+HctLOJuRkREvG58YMXJk0AABBgAGVARHQWB1KQAAAABJRU5ErkJggg==);
/*&:after {
content:
"";
display: block;
width: 100%;
height: 4px;
background-color: #e61c38;
position: absolute;
top: 100%;
left: 0;
-webkit-transition: .3s;
-moz-transition:
.3s;
-ms-transition: .3s;
-o-transition: .3s;
transition: .3s;
}*/
}
&.current, &:hover {
a {
background-position: 0px
-44px;
//background: #242021; /* Old
browsers */
//background:
-moz-linear-gradient(top, #242021 0%, #353132 100%); /* FF3.6+ */
//background: -webkit-gradient(linear, left top, left
bottom, color-stop(0%,#242021), color-stop(100%,#353132)); /*
Chrome,Safari4+ */
//background:
-webkit-linear-gradient(top, #242021 0%,#353132 100%); /*
Chrome10+,Safari5.1+ */
//background:
-o-linear-gradient(top, #242021 0%,#353132 100%); /* Opera 11.10+
*/
//background:
-ms-linear-gradient(top, #242021 0%,#353132 100%); /* IE10+ */
//background: linear-gradient(to bottom, #242021
0%,#353132 100%); /* W3C */
//filter:
progid:DXImageTransform.Microsoft.gradient( startColorstr='#242021',
endColorstr='#353132',GradientType=0 ); /* IE6-9 */
//background-position: 0px 0px;
//background-repeat: no-repeat;
/*&:after {
top: 0%;
-webkit-transition: .3s;
-moz-transition: .3s;
-ms-transition: .3s;
-o-transition: .3s;
transition:
.3s;
}*/
}
}
}
}
Simple menu Effect JAVASCRIPT
$(function(){
$(".main-menu a").click(function(e){
e.preventDefault();
$(this).parents("li").addClass("current").siblings().removeClass("current");
});
})
Post a Comment