logo
down
shadow

jQuery Dropdown Menu hover Slide Down/Up


jQuery Dropdown Menu hover Slide Down/Up

Content Index :

jQuery Dropdown Menu hover Slide Down/Up
Tag : jquery , By : Felix Almeida
Date : January 12 2021, 08:33 AM

help you fix your problem Here you go with a solution https://jsfiddle.net/8sukcnqe/6/
$(document).ready(function () {
    //Show then hide ddown menu on hover
    $('.menuitem').hover(function () {
        $(this).children('.navmain').slideDown(500);
    }, function () {
        $(this).children('.navmain').slideUp(500);
    });
}); 
* {
  /* Used so padding and margins fit in elements defined size */
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  padding: 0; margin: 0;
}
.wrapper {
  margin: 0 auto;
  width: 100%;
  background-color: #010101;
}

/* Navigation Bar Styling */

.top {
  background-color: #010101;
  width: 100%;

  /* Used so the menu drop down can be placed absolutely */
  position: relative;
  border: 1px solid #B2BEB5;
  text-align:center;
   height: 43px;
}

.top li {
  list-style: none;
  display:inline-block;
  text-align: center;
}

/* Style links in nav bar */
.top > li > a {
  color: #fff;
  font-weight: 700;
  text-decoration: none;
  line-height: 43px;
  height:43px;
  padding: 0 15px; 0 15px;
  text-transform: uppercase;
  font-family: 'Noto Serif', serif;
  letter-spacing:1.5px;
  font-size:15px;
}

.top > li:hover  {
text-decoration:underline;
}

/* On hover show the menu drop down */

/* Position the menu drop down relative to the nav bar */
.top > li > div {
  position: absolute;
  left: 0;
  top: 41px;

  /* Don't show unless the nav bar li is hovered */
  display: none;
  background: #fff;
  padding: 10px 10px;
  box-shadow: 2px 4px 4px rgba(0,0,0,0.4);

  /* Hide anything that might be outside the div */
  overflow: hidden;
}

/* End of Navigation Bar Styling */

/* Drop Down Menu Styling */

.navmain {
  width: 100%;
  border: 1px solid #B2BEB5;
}

.nav-divider {
  display: inline-block;
  width: 1.8%;
}

.nav-focus-art {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  text-align: left;
  animation-duration: 4s;
}

.nav-art-author, .nav-art-title {
  display: inline-block;
  padding: 5px 0px;
}


.nav-art-title {
  font-size: 1.4em;
}

.nav-art-image {
  display: inline-block;
}

.nav-divider-2 {
  display: inline-block;
  width: 3.8%;
}

.nav-headlines {
  display: inline-block;
  width: 40%;
  font-size: 1.2em;
  font-weight: bold;
  text-align: left;
  padding-right: 3px;
}

.nav-headline-link {
  border-bottom: 1px solid #B2BEB5;
  padding: 0 0 5px 0;
}
.nav-headline-text {
  padding: 10px 0px;
  font-family: 'Arapey', serif;
color:#000000;
font-size:17px;
font-weight:400;
}

.nav-art-author {
  font-size: 15px;
  text-decoration:none;
}

a.nav-text-link:link,a.nav-text-link:visited,a.nav-text-link:hover,a.nav-text-link:active{
text-decoration:none;
color:#603c68;
font-weight:400;
}    
a.nav-text-link:hover{
text-decoration: none;
font-weight:700;
}  

.nav-headline-link:last-child {
  border-width: 0px;
}

.nav-links {
  display: inline-block;
  width: 20%;
  vertical-align: top;
  text-align: left;
}

.nav-link { padding-bottom: 20px;}

.nav-empty-cell { padding-top: 40px;}

.nav-headline-link:first-child {
  color: #bfa76a;
  font-size:40px;
  font-family: 'Playfair Display', serif;
  font-weight:700;
}

.nav-link:first-child {

}

/* End of Drop Down Menu Styling */
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <ul class="top" id="ddm">
  <li><a href="#">home</a></li>
  <li class="menuitem"><a href="#">bras</a>
    <div class="navmain">
      <div class="nav-divider"></div>
	    <div class="nav-headlines">
        <div class="nav-headline-link">BRAS</div>
        <div class="nav-headline-text">Gi&#275; Gi&#275; specializes in finding comfortable, well fitting, beautiful bras for all women.  Come and experience a professional bra fitting with one of our certified fitters. We have a fabulous selection of amazing bras, sizes ranging from 28 inch to 56 inch bands and AA to J cups!!</div>
      </div>
      <div class="nav-divider-2"></div>
      <div class="nav-focus-art">
        <span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Strapless Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Nursing Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Minimizer Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Everyday (or T-shirt) Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Push-up Bra</a></span><br>
      </div>
      <div class="nav-divider-2"></div>
      <div class="nav-focus-art">
        <span class="nav-art-author"><a href="#" class="nav-text-link">Post-surgical Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Mastectomy Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Sports Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Backless Bra</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Bathing Suits (or swimwear?)</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Boustiers</a></span><br>
		<span class="nav-art-author"><a href="#" class="nav-text-link">Bralettes</a></span><br>
      </div>
      <div class="nav-divider-2"></div>

    </div> <!-- End of nav-main -->
    </li>
  <li><a href="#">MASTECTOMY</a></li>
</ul>
/* On hover show the menu drop down */
.top > li:hover > div {
  display: block;
}

Comments
No Comments Right Now !

Boards Message :
You Must Login Or Sign Up to Add Your Comments .

Share : facebook icon twitter icon

Adding jquery effect to dropdown menu and aligning dropdown menu exactly below Hover tab


Tag : jquery , By : fedorafennec
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further Try this below code with your fiddle. Modify the below code with what ever kind of animation you want. Take reference from .animate.
 $('#coolMenu .pink p a').mouseover(function() {
        $('#coolMenu .pink ul').animate({
            height: ['toggle'],
            opacity: 0.75
        }, 3000, function() {
            $('#coolMenu .pink ul').css('display', 'block');
        });
    });‚Äč

Bootstrap dropdown menu slide animation on hover


Tag : jquery , By : artifex
Date : March 29 2020, 07:55 AM
wish of those help I don't think you need all of that code just to make it drop down on hover, I did the same using this jQuery its worked fine for me and much simpler.
$(document).ready(function() {    
  $('.navbar-default .navbar-nav > li.dropdown').hover(function() {
$('ul.dropdown-menu', this).stop(true, true).slideDown('fast');
$(this).addClass('open');
      }, function() {
$('ul.dropdown-menu', this).stop(true, true).slideUp('fast');
$(this).removeClass('open');
      });
   });

Need jQuery menu to slide down on first hover and hovering on other menus just show it's div and no need of slide down e


Tag : jquery , By : Piotr Balas
Date : March 29 2020, 07:55 AM
around this issue Try this, solution is for home menu only, you will need to add if condition in rest of all hover events.
$('.home').hover(function(){

    if($('.container-2,.container-3,.container-4,.container-5,.container-6,.container-7,.container-8').is(":visible"))
    {
        $('.container-2,.container-3,.container-4,.container-5,.container-6,.container-7,.container-8').hide();
        $('.container-1').show();
    }

 $('.container-1').slideDown(750);
});

JQuery hover dropdown menu disappears when hovering on the dropdown menu


Tag : javascript , By : Ben Humphrys
Date : March 29 2020, 07:55 AM
fixed the issue. Will look into that further I'm doing something slightly different to what i've seen work, many people have done it so there dropdown is part of a child list. However i'm trying to work with a sibling dropdown menu. , Try this
var isSiblingHovered = false;
$('.dropdown-hover-toggle').hover(function () {
    $(this).siblings('.dropdown-menu').slideDown();
},
function () {
    var current = $(this);
    setTimeout(function(){
        if(!isSiblingHovered){
            current.siblings('.dropdown-menu').stop().slideUp();
        }
    }, 50);
});

$('body').on("mouseleave", ".dropdown-menu", function() {
    isSiblingHovered = false;
    $('.dropdown-menu').stop().slideUp();
});

$('body').on("mouseenter", ".dropdown-menu", function() {
    isSiblingHovered = true;
});

Tag : javascript , By : Lauren Kirschner
Date : March 29 2020, 07:55 AM
it helps some times The solution you found in here is usefull, this javascript code maybe can help:
$(document).ready(function(){
            
  $('.menu li').hover(
    function () {
        $('.sub', this).stop().slideDown(650);
    }, 
    function () {
        $('.sub', this).stop().slideUp(650);
    }
);

});




/*$('ul >li').hover(function() {
    clearTimeout($(this).data('timeout'));
    $('li > ul').slideDown('fast');
}, function() {
    var t = setTimeout(function() {
        $('li > ul').slideUp('fast');
    }, 650);
    $(this).data('timeout', t);
});*/
li{
  list-style-type:none;
  display: inline-block;
  position: relative;
  padding: 20px;
  background-color: #08c;
}

li ul li{
  min-width:200px;
}

li ul{
  margin:0;
  padding:0;
  position: absolute;
  top: 100%;
  left:0;
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<ul class="menu">
  <li>Page A</li>
  <li>Page B
    <ul class="sub">
      <li>Dropdown</li>
      <li>Dropdown</li>
    </ul>
   </li>
   
</ul>
Related Posts Related QUESTIONS :
  • jquery appendTo form
  • Jquery code working in all browsers apart from FF
  • jquery syntax function(){mylongfunc();} vs. just mylongfunc();
  • jQuery.load doesn't execute javascript with document.write
  • Animate hidden hyperlink to display:block
  • jquery ajax call returning error when its not an error
  • Exclude one or more elements from being connected (using connectWith) in jQuery's sortable lists
  • Adding link with existing href
  • jquery cycle plugin divs always stacked problem
  • jquery toggle and fade in one function?
  • JQuery UI Tabs caching
  • Drag and Drop into another div and move in the div only using jquery
  • Links in rounded boxes? In ALL browsers (yep included IE8)
  • How to change the content of the Span using jQuery?
  • jQuery; combine user click and :checked
  • jQuery - Finding the element index relative to its container
  • jQuery .each() function. Resetting the index?
  • jQuery storing settings
  • Why does asp.net mvc form submits itself on button clicks when javascript function error?
  • Linking to non-home panel in JQTouch site
  • How to Edit jQuery Table Using CSS
  • Jquery hover triggers "mouse leave" without cursor leaving
  • DELETE http://localhost:8000/product/[object%20Object] 500 (Internal Server Error)
  • Comparing two string arrays and returning key of not found element using jquery
  • using jquery to change list items is changing all list items, when i want to only change one list item
  • Sending a Json data from my html page to a php
  • Click function to search a specific element in a Json object
  • Bootstrap 4 - Progress Bar Progression
  • how to deleted item materialize chips
  • jQuery - Hide non-active elements using filter()
  • Adding style to string table is not working
  • Github merge multiple files into single compressed master file
  • Replace characters in a field on page load
  • Unable to send data from Form to SQL database
  • If all divs have same style, remove element
  • How to click a jQuery Dialog button in TestCafe
  • Cannot reinitialise DataTable with Angular Datatable
  • How to add Class active on Click in Navbar
  • how to call fail method into jquery.get/post success method?
  • Slider with tabs
  • Jquery Get parent element from data function
  • Ho to put a new line in <p> tag in my jquery?
  • How can I use a text value as a mathematical operator?
  • DataTable columns values showing Only DefaultContent
  • JQuery select dynamically added elements
  • How to change an image source on hover?
  • How to bind jquery event to dynamically added multiple DOM elements?
  • How to get td values and store in array using Jquery?
  • How to add handler to dinamically created tr in JQuery?
  • How to Covert Html to PDF in Jquery?
  • Jquery before() and after() used to create a <div> container not inserting closing tags in after()
  • I want to delete previously added class
  • Open html page in same window after clicking on navlink
  • Datatable is not working when I populate table using smarty
  • How to change image based on the offset top of the content div
  • Find the index of table column with specific id
  • How to return value of $(window).resize()
  • How to optimize adding numerous elements dynamically into web page
  • Content slide down on top of page?
  • How to write if statement for when a specified option is selected in select tag in JQuery
  • shadow
    Privacy Policy - Terms - Contact Us © scrbit.com