Sup guys,
for a while now I have been trying to get this to work in jQuery, but I have no idea how to accomplish that.
It's about the mobile navigation of a basic website.
Basically I am trying to achieve that the mobile navigation closes if we click on the 3 dots with the adress data and the other way around. You can see it in this example:
https://www.templatemonster.com/de/demo/62436.html
Choose the mobile version to see what I mean.
Does anyone know how to do this with jQuery or javascript?
Here is what I have currently:
Adress Data
$('.js--adress-icon').click(function() {
var kont = $('.js--adress-nav');
kont.slideToggle(200);
});
Mobile Navigation
var hamburger = $('#hamburger-icon');
hamburger.click(function() {
var nav = $('.js--main-nav');
nav.slideToggle(200);
hamburger.toggleClass('active');
return false;
});
if ($(window).width() < 768){
$('.main-navigation li a').on('click', function(){
$('.js--main-nav').hide();
$('#hamburger-icon').removeClass('active');
});
};
Thx in advance!
I don't know what your html looks like but this is a simple way to achieve this using css and javascript
<script src="https://code.jquery.com/jquery-2.1.4.js"></script>
<nav class="menu">
<ul class="active">
<li class="current-item">Home</li>
<li>Menu1</li>
<li>Menu2</li>
</ul>
<a class="toggle-nav" href="#">⁝</a>
</nav>
</body>
then your javascript
jQuery(document).ready(function() {
jQuery('.toggle-nav').click(function(e) {
jQuery(this).toggleClass('active');
jQuery('.menu ul').toggleClass('active');
e.preventDefault();
});
});
then your css
/*----- Toggle Button -----*/
/*----- Menu -----*/
#media screen and (min-width: 860px) {
.menu {
width:100%;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
}
.menu ul {
display:inline-block;
}
.menu li {
margin:0px 50px 0px 0px;
float:left;
list-style:none;
font-size:17px;
}
.menu li:last-child {
margin-right:0px;
}
.menu a {
text-shadow:0px 1px 0px rgba(0,0,0,0.5);
color:#777;
transition:color linear 0.15s;
}
.menu a:hover, .menu .current-item a {
text-decoration:none;
color:#66a992;
}
/*----- Responsive -----*/
#media screen and (max-width: 1150px) {
.wrap {
width:90%;
}
}
#media screen and (max-width: 970px) {
.search-form input {
width:120px;
}
}
#media screen and (max-width: 860px) {
.menu {
position:relative;
display:inline-block;
}
.menu ul.active {
display:none;
}
.menu ul {
width:100%;
position:absolute;
top:120%;
left:0px;
padding:10px 18px;
box-shadow:0px 1px 1px rgba(0,0,0,0.15);
border-radius:3px;
background:#303030;
}
.menu ul:after {
width:0px;
height:0px;
position:absolute;
top:0%;
left:22px;
content:'';
transform:translate(0%, -100%);
border-left:7px solid transparent;
border-right:7px solid transparent;
border-bottom:7px solid #303030;
}
.menu li {
margin:5px 0px 5px 0px;
float:none;
display:block;
}
.menu a {
display:block;
}
.toggle-nav {
padding:20px;
float:left;
color:#777;
font-size:20px;
}
.toggle-nav:hover, .toggle-nav.active {
text-decoration:none;
color:#66a992;
}
}
check this fiddle : https://jsfiddle.net/wggs8pf8/
Related
I'm trying to create a responsive mobile menu that kicks in when the browser width is 885 pixels. It does change from my main navigation to the responsive menu at that width however the correct CSS styling does not kick in until the browser is about 640 pixels wide.
Here is an example: http://www.concept82.com/DIS/menutest.html
The responsive menu does use javascript and I'm not very good with that. I found the menu and script off the internet a few years ago and I'm trying to make it work now. Thanks so much for any help!!
CSS for menu:
/* Responsive Mobile Menu */
.rmm {
display:block;
position:relative;
width:100%;
padding: 20px 0px 0px 0px;
margin:0 auto !important;
text-align: center;
line-height:19px !important;
}
.rmm * {
-webkit-tap-highlight-color:transparent !important;
font-family: 'Open Sans Condensed', sans-serif;
}
.rmm a {
color:#ebebeb;
text-decoration:none;
}
.rmm .rmm-main-list, .rmm .rmm-main-list li {
margin:0px;
padding:0px;
}
.rmm ul {
display:block;
width:auto !important;
margin:0 auto !important;
overflow:hidden;
list-style:none;
}
/* sublevel menu - in construction */
.rmm ul li ul, .rmm ul li ul li, .rmm ul li ul li a {
display:none !important;
height:0px !important;
width:0px !important;
}
/* */
.rmm .rmm-main-list li {
display:inline;
padding:padding:0px;
margin:0px !important;
}
.rmm-toggled {
display:none;
width:100%;
position:relative;
overflow:hidden;
margin:0 auto !important;
}
.rmm-button:hover {
cursor:pointer;
}
.rmm .rmm-toggled ul {
display:none;
margin:0px !important;
padding:0px !important;
}
.rmm .rmm-toggled ul li {
display:block;
margin:0 auto !important;
}
/*style*/
.rmm a {
color:#333333;
}
.rmm a:hover {
background-color: #6D0001;
}
.rmm .rmm-main-list li a {
display:inline-block;
padding:8px 30px 8px 30px;
margin:0px -3px 0px -3px;
font-size:15px;
}
.rmm-toggled {
width:100%;
min-height:36px;
background-color:#B30000;
color: #FFFFFF;
}
.rmm-toggled-controls {
display:block;
height:36px;
color:#FFFFFF;
text-align:left;
position:relative;
}
.rmm-toggled-title {
position:relative;
top:9px;
left:9px;
font-size:16px;
color:#FFFFFF;
}
.rmm-button {
display:block;
position:absolute;
right:9px;
top:7px;
}
.rmm-button span {
display:block;
margin:4px 0px 4px 0px;
height:2px;
background:#FFFFFF;
width:25px;
}
.rmm-toggled ul li a {
display:block;
width:100%;
text-align:center;
padding:10px 0px 10px 0px;
border-bottom:1px solid #930709;
color:#FFFFFF;
background-color: #B30000;
}
.rmm-toggled ul li:first-child a {
border-top:1px solid #930709;
}
/*media queries*/
#media screen and (max-width: 885px) {
#nav {
display: none;
}
#mainnav {
width: 100%;
height: 150px;
}
.rmm {
visibility: visible;
z-index: 2;
}
#logo {
margin-left: 15px;
width: 50%;
float: none;
}
JavaScript for menu:
function responsiveMobileMenu() {
$('.rmm').each(function() {
$(this).children('ul').addClass('rmm-main-list'); // mark main menu list
/* width of menu list (non-toggled) */
var $width = 0;
$(this).find('ul li').each(function() {
$width += $(this).outerWidth();
});
// if modern browser
if ($.support.leadingWhitespace) {
$(this).css('max-width' , $width*1.05+'px');
}
//
else {
$(this).css('width' , $width*1.05+'px');
}
});
}
function getMobileMenu() {
/* build toggled dropdown menu list */
$('.rmm').each(function() {
var menutitle = $(this).attr("data-menu-title");
if ( menutitle == "" ) {
menutitle = "Menu";
}
else if ( menutitle == undefined ) {
menutitle = "Menu";
}
var $menulist = $(this).children('.rmm-main-list').html();
var $menucontrols ="<div class='rmm-toggled-controls'><div class='rmm-toggled-title'>" + menutitle + "</div><div class='rmm-button'><span> </span><span> </span><span> </span></div></div>";
$(this).prepend("<div class='rmm-toggled rmm-closed'>"+$menucontrols+"<ul>"+$menulist+"</ul></div>");
});
}
function adaptMenu() {
/* toggle menu on resize */
$('.rmm').each(function() {
var $width = $(this).css('max-width');
$width = $width.replace('px', '');
if ( $(this).parent().width() < $width*1.05 ) {
$(this).children('.rmm-main-list').hide(0);
$(this).children('.rmm-toggled').show(0);
}
else {
$(this).children('.rmm-main-list').show(0);
$(this).children('.rmm-toggled').hide(0);
}
});
}
$(function() {
responsiveMobileMenu();
getMobileMenu();
adaptMenu();
/* slide down mobile menu on click */
$('.rmm-toggled, .rmm-toggled .rmm-button').click(function(){
if ( $(this).is(".rmm-closed")) {
$(this).find('ul').stop().show(300);
$(this).removeClass("rmm-closed");
}
else {
$(this).find('ul').stop().hide(300);
$(this).addClass("rmm-closed");
}
});
});
/* hide mobile menu on resize */
$(window).resize(function() {
adaptMenu();
});
sorry it's a lot
I have a main menu on the header with links, and i have a triangle that moves as the user hovers from one page to another. I want to keep it moving, but i would like to see the transition showing like on this website: harris-active.co.uk
CSS Code:
/* Navigation
--------------------------------------------------------------------------------*/
#nav-wrap .container {
clear: both;
overflow: hidden;
position: relative;
border:none;
}
#nav-wrap table {
width:100%;
border-collapse: collapse;
border-spacing: 0;
padding:0px;
}
#nav-wrap table td {
border-collapse: collapse;
border-spacing: 0;
}
#nav-wrap .container ul {
list-style: none;
float: right;
margin-right:40px;
}
#nav-wrap .container ul li {
list-style: none;
float: left;
margin-left:40px;
position:relative;
top:0px;
}
#nav-wrap .container ul li a {
display: block;
font-family: 'Open Sans', sans-serif;
font-weight: bold;
color: #999999;
text-decoration: none;
padding: 50px 0px;
border: 0;
outline: 0;
list-style-type: none;
font-size: 16px;
transition: 0.5s ease;
}
#nav-wrap .container ul li#active a,
#nav-wrap .container ul li a:hover {
color: #fff;
border: 0;
text-shadow: 0 0 3px rgba(255,255,255,0.5);
background: url(nav-hover.png) no-repeat center bottom;
transition: 0.5s ease;
}
this is how it is currently showing on my live site: tradey-lb.com
With an html as this:
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
You could use absolute position to place the triangle whatever position like:
.arrow {
position:absolute;
bottom:0px;
left:85px;
}
Then add some classes for each different hover like:
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
And with a easy function, when you hover on your menu you remove any class already there on "Arrow" and then add the position class needed... like:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
Full example:
$(".m1").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position1");
});
$(".m2").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position2");
});
$(".m3").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position3");
});
$(".m4").hover(function () {
$('#arrowid').attr('class', 'arrow');
$('#arrowid').addClass("position4");
});
ul {position:relative; border-bottom:2px solid #000;}
li {display:inline-block;padding:12px 30px;overflow:visible;}
.arrow {
width: 0;
height: 0;
border-left: 5px solid transparent;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
padding:0;
position:absolute;
bottom:0px;
left:85px;
transition: left 0.3s ease-in-out;
}
.position1 {
left:85px;
}
.position2 {
left:195px;
}
.position3 {
left:300px;
}
.position4 {
left:410px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<ul>
<li class="m1">menu1</li>
<li class="m2">menu2</li>
<li class="m3">menu3</li>
<li class="m4">menu4</li>
<li id="arrowid" class="arrow"></li>
</ul>
I was tempted to delete my answer once I saw your rude comment to another user but this may help someone else around so I'll keep it for now. But try ro learn some manners.
The below code achieves a slide up and down action on the selected 'element' but for some reason after slide up, the fa-chevron-down font awesome icon does not display:
function showHideChatBox(element){
var e = jQuery(element).parents(".box1").children(".box1-body");
var t = 0;
if(jQuery(element).hasClass("collapse")) {
jQuery(element).removeClass("collapse").addClass("expand");
t = jQuery(element).children(".fa-chevron-down");
t.removeClass("fa-chevron-down").addClass("fa-chevron-up");
e.slideUp(200);
}
else {
jQuery(element).removeClass("expand").addClass("collapse");
t = jQuery(element).children(".fa-chevron-up");
t.removeClass("fa-chevron-up").addClass("fa-chevron-down");
e.slideDown(200);
}
}
I don't think you are approaching this correctly, you should be referencing the toggle class to properly 'toggle' the font awesome chevron icons. Try using the jQuery toggle class like so:
JS
$(function () {
$('.dropdown_icon').click(function () {
$("#dropdown").slideToggle('fast');
$(this).children(".fa-chevron-down, .fa-chevron-up").toggleClass( 'fa-chevron-down fa-chevron-up');
});
});
Which is a simplified version of the answer to this question: Change class on inactive icon - jquery
HTML
<div id="header">
<ul class="hdr_link_icons">
<li class="dropdown_icon">
Dropdown<i class="fa fa-chevron-down"></i>
</li>
</ul>
<ul class="dropdown_area" id="dropdown">
<li>Your Account <span class="hdr_link_arrow">»</span></li>
<li>Corporate Sales <span class="hdr_link_arrow">»</span></li>
<li>Got a voucher? <span class="hdr_link_arrow">»</span></li>
</ul>
</div>
CSS
body { margin:0; padding:0; }
ul { margin:0; padding:0; }
#header { height:auto; width:100%; overflow:hidden; border-bottom:1px dashed #c1c1c1; padding:5px 0; }
#header .header_logo { height:40px; width:auto; float:left; }
#header .hdr_link_icons { height:40px; width:auto; float:right; list-style:none; background-color: yellow; }
#header .hdr_link_icons li { height:40px; width:70px; float:right; list-style:none; border-right:1px solid #ebebeb; padding:0 0 0 5px; cursor:pointer; position:relative; }
#header .hdr_link_icons li i { position:absolute; right:7px; top:15px; color:#666666; }
#header .hdr_dropdown_area { height:auto; width:100%; background:#F5F2F2; border-top:5px solid #712D55; position:absolute; top:51px; right:0; }
#header .hdr_dropdown_area li { height:auto; float:none; border-bottom:1px dotted #c1c1c1; font-family:tahoma, arial; padding:10px 0; margin:0 0 0 10px !important; text-align:left; text-transform:capitalize; }
#header .hdr_dropdown_area li:last-child { border:none; }
#header .hdr_dropdown_area li a { color:#333333; text-decoration:none; }
#header .dropdown_area { display:none; }
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 1 year ago.
Improve this question
I want to make a responsive menu looks like following in my website.
I've already made my website responsive with CSS media queries. I want to add this kind of menu when the max-width : 479px .
This is my Project: Link to project
You can try to do something like this.For me it looks like drop down menu. It is just an suggestion
Fiddle LINK
<div class="dd_menu_wrapper">
<!-- MENU -->
<label for="dd-0" class="dd_label">Navigation</label>
<input type="checkbox" class="dd_toggle" id="dd-0">
<ul class="dd_menu">
<li>Home
</li>
<li class="dd_parent">
<label for="dd-1">Products</label>
<input type="checkbox" class="dd_trigger" id="dd-1">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>Link Five
</li>
</ul>
</li>
<li class="dd_parent">
<label for="dd-2">Resources</label>
<input type="checkbox" class="dd_trigger" id="dd-2">
<ul>
<li>Link One
</li>
<li>Link Two
</li>
<li>Link Three
</li>
<li>Link Four
</li>
<li>This is samplek
</li>
</ul>
</li>
<li>Contact
</li>
<li>Resources
</li>
<li>Resources
</li>
</ul>
</div>
CSS
/* _______________________________________________
01 MENU BAR
_______________________________________________ */
.dd_menu_wrapper {
width: 479px;
margin:0 auto;
position: relative;
z-index:9999;
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
line-height:21px;
color: #ffffff;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
margin-bottom:1px;
}
.dd_menu_wrapper a, .dd_menu_wrapper label {
color: #FFF;
text-decoration: none;
cursor: pointer;
-webkit-transition:color .3s;
-moz-transition:color .3s;
-o-transition:color .3s;
-ms-transition:color .3s;
transition:color .3s;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu_wrapper a:hover,
.dd_menu_wrapper label:hover,
.dd_parent:hover label {
color:#000;
background-color:#eff0f1;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.dd_menu {
width: 100%;
list-style: none;
margin: 0;
padding: 0;
*zoom: 1;
background: #565a5c;
}
.dd_menu:before, .dd_menu:after {
content:" ";
display: table;
}
.dd_menu:after {
clear: both;
}
.dd_menu li {
position: relative;
}
.dd_menu > li {
float: left;
font-weight:bold;
}
.dd_menu li a {
padding: 10px 15px;
display: block;
}
.dd_menu > li:hover {
background-color: #eff0f1;
color:#000;
}
.dd_menu li.dd_parent {
}
.dd_menu li.dd_parent ul li a {
color:#000;
text-decoration:none;
font-size:13px;
}
.dd_menu li.dd_parent ul li a:hover {
color:#000;
text-decoration:underline;
}
.dd_menu li.dd_parent > label {
display: block;
padding: 10px 15px;
background-repeat: no-repeat;
}
.dd_menu li.dd_parent > label a:hover {
color:#000000;
}
.dd_menu li.dd_parent > label a:active {
color:#000000;
}
.dd_menu li.dd_parent > label a:focus {
color:#000000;
}
.dd_menu li.dd_parent > label a:visited {
color:#000000;
}
.dd_menu li.dd_parent > label a {
color:#000000;
}
/* _______________________________________________
02 DROP DOWNS
_______________________________________________ */
.dd_menu ul {
list-style: none;
margin: 0;
padding: 0;
position: absolute;
z-index: 999;
top: 41px;
left: -999em;
min-width: 170px;
background: #eff0f1;
color:#000;
}
.dd_menu .dd_trigger {
display: block;
position: absolute;
cursor: pointer;
width: 100%;
margin: 0;
-ms-filter:"progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
filter: alpha(opacity=0);
opacity: 0;
}
/* _______________________________________________
03 DESKTOP VERSION
_______________________________________________ */
#media screen and (min-width: 768px) {
.dd_menu > li:hover > ul {
left:auto;
}
.dd_toggle, .dd_label {
display: none;
}
}
/* _______________________________________________
04 MOBILE VERSION
_______________________________________________ */
#media screen and (max-width: 767px) {
.dd_label {
display: block;
padding: 10px 15px;
cursor: pointer;
color:#ffffff;
background: #565a5c;
}
.dd_label:after {
width: 24px;
height: 24px;
content: url("../images/toggle.png");
float: right;
}
.dd_toggle, .dd_toggle:checked {
width: 100%;
display: block;
position: absolute;
cursor: pointer;
height: 40px;
margin: 0;
opacity: 0;
}
.dd_menu {
position: absolute;
background: #565a5c;
opacity:0;
visibility:hidden;
}
.dd_menu > li {
padding-right: 0;
float: none;
}
.dd_menu > li:hover {
background-color: transparent;
}
.dd_menu li ul {
display: block;
width: 100%;
top:auto;
left:auto;
width:auto;
z-index: 999;
visibility: visible;
margin-left: 0;
padding-left:12px;
background: none;
}
.dd_toggle:checked + .dd_menu {
opacity:1;
visibility:visible;
}
.dd_menu .dd_trigger + ul {
max-height:0;
opacity:0;
visibility:hidden;
}
.dd_menu .dd_trigger:checked + ul {
position: static;
max-height:999px;
opacity:1;
visibility:visible;
z-index: 999;
background-color:#eff0f1;
}
}
In smaller screen hide your menu with css .
.menu { display:none; }
make one button whos hide on larger screen and visible in smaller screen with help of media queries , then you can add java script like this
$(document).ready(function (){
$("#buttonId").click(function (){
$("#menu").slideToggle();
});
});
The image you included is probablly using Bootstrap Framework to achieve the responsiveness.
You can have a look at it here.
You will have to write CSS media queries to achieve that. You can refer to this tutorial to find how can you make a responsive navbar.
Demo
css
html,body {
margin:0;
padding:0;
}
header {
background-color:black;
overflow:hidden;
padding:2%;
}
#logo {
float:left;
width:calc(100% - 50px);
max-width:280px;
height:40px;
background-image:url('https://lh4.googleusercontent.com/-gjxoCu8Fu3c/AAAAAAAAAAI/AAAAAAAA-Wk/mVaqfjXjn4k/s46-c-k-no/photo.jpg'); /* your logo here! */
background-repeat:no-repeat;
/*background-size:100%;*/
}
nav {
float:right;
padding-top:10px;
}
.navitem {
color:#999;
font-family:Helvetica;
font-size:16px;
margin-left:5px;
text-decoration:none;
font-weight:bold;
padding:8px;
}
.navitem:first-child {
margin-left:0px;
}
.navitem:hover {
color:white;
}
#smartbutton {
float:right;
width:20px;
height:15px;
cursor:pointer;
padding:7px;
border:1px solid #999;
border-radius:6px;
margin-top:5px;
display:none;
}
.buttonline {
background-color:#999;
height:3px;
margin-top:4px;
}
.buttonline:first-child {
margin-top:0px;
}
/* standard menu */
#media only screen and (min-width:480px)
{
#smartbutton {
display:none;
}
nav {
display:inline-block !important;
}
}
/* smart menu */
#media only screen and (max-width:479px)
{
#smartbutton {
display:inline-block;
}
nav {
display:none;
width:100%;
position:relative;
top:5px;
}
.navitem {
border-top:1px solid #999;
display:block;
margin:0px;
}
.navitem:hover {
background-color:#333;
}
}
HTML
<header>
<a id="logo" href="#"></a>
<nav>
Link1
Link2
Link3
</nav>
</header>
jquery
// create smartbutton
$('nav').before('<div id="smartbutton"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
$('#smartbutton').append('<div class="buttonline"></div>');
// add click listener
$('#smartbutton').click(function(event)
{
$('nav').animate({height:'toggle'},200);
});
I thinks its better to use Frameworks like Twitter Bootstrap or Foundation but as I've seen you example above I think it is Twitter Bootstrap. It is simple to use the frameworks.
Here is tutorials of Twitter Bootstrap. I give you the navbar link for you to see the example.
http://getbootstrap.com/components/#navbar
See the examples there.. just make you browser smaller for you to see how it is responsive..
I hope it will help you.
Why don't you use a framework? Here for example .
They have a component which is pretty much what you want.
And here you will find an article on how to style it to your liking.
I have a bit of a problem and I am struggling to solve it for some time now.
Top menu is working... strange.
To see the problem go to: proba.dalipro.com.
JS for controlling menu:
var timeoutID;
jQuery(function(){
jQuery('.dropdown').mouseenter(function(){
jQuery('.sublinks').stop(false, true).hide();
window.clearTimeout(timeoutID);
var submenu = jQuery(this).parent().next();
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
left: jQuery(this).offset().left + 'px',
zIndex:100
});
submenu.stop().slideDown(300);
submenu.mouseleave(function(){
jQuery(this).slideUp(300);
});
submenu.mouseenter(function(){
window.clearTimeout(timeoutID);
});
});
jQuery('.dropdown').mouseleave(function(){
// timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).hide();}, 250); // just hide
timeoutID = window.setTimeout(function() {jQuery('.sublinks').stop(false, true).slideUp(300);}, 250); // slide up
});
});
and css for menu:
/* CSS For Dropdown Menu Start */
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
}
#menu_top ul li
{
display:inline;
float:left;
}
#menu_top ul li a
{
color:#ffffff;
background:#990E00;
margin-right:5px;
font-weight:bold;
font-size:12px;
text-decoration:none;
display:block;
width:100px;
height:25px;
line-height:25px;
text-align:center;
border: 1px solid #560E00;
}
#menu_top ul li a:hover
{
color:#cccccc;
background:#560E00;
font-weight:bold;
text-decoration:none;
display:block;
width:100px;
text-align:center;
border: 1px solid #000000;
}
#menu_top ul li.sublinks a
{
color:#000000;
background:#f6f6f6;
border-bottom:1px solid #cccccc;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
margin-top:2px;
}
#menu_top ul li.sublinks a:hover
{
color:#000000;
background:#FFEFC6;
font-weight:normal;
text-decoration:none;
display:block;
width:100px;
text-align:center;
}
#menu_top ul li.sublinks
{
display:none;
position: relative;
}
/* CSS For Dropdown Menu End */
What I need to do to fix drop down function?
Take left out of the submenu css:
submenu.css({
position:'absolute',
top: jQuery(this).offset().top + jQuery(this).height() + 'px',
zIndex:100
});
Also, change #menu_top ul and #menu_top ul li in your style sheet to:
#menu_top ul
{
list-style:none;
padding:0px;
margin:0px;
float: left
position: relative;
}
#menu_top ul li
{
}