www.webdeveloper.com
Results 1 to 5 of 5

Thread: Megamenu Dropdown Transition

  1. #1
    Join Date
    Jul 2014
    Posts
    5

    Megamenu Dropdown Transition

    Need help with a Mega Menu on a Drupal Site. The dropdown is being shown using the following css....

    Code:
    #primary ul li:hover ul {
    display: block;
    }
    #primary ul li ul {
    position: absolute;
    display: none;
    top: 42px;
    left: -21px;
    margin: 0;
    padding: 0 0 20px 0;
    width: 960px;
    height: auto;
    background: #071689;
    border: 0;
    line-height: normal;
    overflow: hidden;
    }
    Now I know that with display changing I cannot use CSS3 Transitions correct? So I need to find an alternative way to make the mega menu "Fade-In" rather than instantly pop-up. I could always resort to JQuery I suppose but trying to stay with CSS. Thanks in advance for your replies! =)

  2. #2
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    80
    Dude adding fade in/out is easy..

    See demo (CSS tab at top to view css)

    http://jsbin.com/vijov/4/edit

    Lick!

  3. #3
    Join Date
    Jun 2014
    Location
    Cairns - Australia
    Posts
    80
    My bad!... Luck! ???

  4. #4
    Join Date
    Jul 2014
    Posts
    5
    Quote Originally Posted by Code-tard View Post
    Dude adding fade in/out is easy..

    See demo (CSS tab at top to view css)

    http://jsbin.com/vijov/4/edit

    Lick!

    Have applied the code as stated in your demo. Now once the mouse is at the point its over the visibly hidden item, it becomes shown rather than when just hovering over the parent of it. Would also need some kind of lag still so that it doesnt show the mega menu instantly as it becomes hard to get off of due to its size on most resolutions. Any thoughts on that?

  5. #5
    Join Date
    Jul 2014
    Posts
    5
    http://screencast-o-matic.com/watch/c2iYqwnJfA <-- Shows the issue I am having currently. Any help appreciated.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •  
HTML5 Development Center



Recent Articles