SitePoint Sponsor

User Tag List

Results 1 to 15 of 15
  1. #1
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)

    css3 mega menu drop down - I have FadeIn I need FadeOut

    I'm updating my mega menu. Doing all in CSS. But, as usual there is one last thing I can't seem to figure out. Seen here http://www.visibilityinherit.com/cod...-down-demo.php. I got the fade in part working correctly. However I can't seem to work out a way to also get it to fadeOut. It should be possible. I'm no pro with keyframes. I used them because it was the only way I could figure out how to fade in the pre-existing li. Can you figure this out? Thanks!

  2. #2
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,
    Have you tried ease-in-out; ?

    As shown here

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Hey Ray. That's what is on there now I believe. Ease-in-out I believe only works on an example like yours were it goes from one width to another or etc. my div that pops up is there on hover and not on exit. So there is nothing to transition as I see it. The li is not going anywhere though so on the same token that should work. In short I don't know

  4. #4
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Ease-in-out I believe only works on an example like yours were it goes from one width to another or etc.
    I see you are using animation whereas I was using transition, that may make a difference too, not sure.

    Yeah, that fluid height will probably require another approach. I remember using visibility:hidden/visible when I was playing around with transitions a while back, that might be worth a try.

  5. #5
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ya I tried that already. The reason I used keyframes - thus animation instead of transition is because of the li. I could just do a simple transition with the hidden div but not with the already visible li.

  6. #6
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    It's always a troubling sign when my question here on SP is on page one of google while I'm looking for a possible answer.

  7. #7
    SitePoint Member flannel jesus's Avatar
    Join Date
    Nov 2012
    Posts
    18
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    If I may make this slightly off-topic comment: The fade-in is much too slow. Sorry I can't help you with figuring out how to fade-out, but I think this is an issue also worth fixing.

  8. #8
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Hi Eric,

    Didn't mean to bail out on you earlier, I had to take care of some other business.

    This is what I had in mind by using transition (rather than animation) along with visibility.
    It's kinda rough and still needs some work with the li a & h2 bg colors.

    Rather than hiding the ap div with left:-999em just let visibilty:hidden take care of it, being that it is AP that will keep it out of the flow.



    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 Mega Drop Down Menu | Demo | { visibility: inherit; }</title>
    <style type="text/css">
    * {
    margin:0; 
    padding:0; 
    }
    html, body {
    height:100%;
    background:#666;
    }
    #wrap {
    min-height:100%; 
    width:905px; 
    margin:-1px auto 0;
    background:#ccc;
    border:1px solid #000;
    border-bottom:0;
    }
    #content h1 {
    padding:40px 80px 0;
    }
    #content h2, #content p, #content a {
    padding:15px 80px;
    color:#000;
    }
    /* ---------- Mega Drop Down --------- */
    #mega {
    list-style:none;
    font-weight:bold;
    height:2em;
    margin:60px -1px 0 0;
    }
    #mega li {
    background:#999;
    border:1px solid #000;
    margin-left:-1px;
    float:left;
    width:150px;
    text-align:center;
    position:relative;
    }
    #mega li:hover {
    background:#eee;
    border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
    padding:12px 0 1px 0;
    margin-top:-12px;
    z-index:1; /* shadow above adjacent li */
    box-shadow:0 1px 8px #000;
    border-radius:6px 6px 0 0;
    }
    #mega a {
    color:#000;
    outline:0;
    text-decoration:none;
    display:block;
    line-height:2em;
    }
    #mega li:hover a { /* hide top shadow on div */
    /*background:#eee; moved to #mega li:hover div*/
    padding-bottom:10px;
    margin-bottom:-10px;
    position:relative;
    z-index:1;
    }
    /* ----------- Hide/Show Div ---------- */
    #mega  div {
    position:absolute;
    /*left:-999em;*/
    left:-1px;top:auto;
    margin-top:1px;
    width:350px;
    padding:0 10px 10px;
    border:1px solid #000;
    border-top:0;
    font-weight:normal;
    text-align:left;
    box-shadow:0 2px 8px #000;
    border-radius:0 0 6px 6px;
    }
    
    #mega li.dif div { /*removed :hover here*/
    left:-221px;
    }
    #mega li div {
    -moz-transition: all .65s ease-in-out;
    -webkit-transition: all .65s ease-in-out;
    -o-transition: all .65s ease-in-out;
    -ms-transition: all .65s ease-in-out;
    transition: all .65s ease-in-out;
    visibility:hidden;
    background-color:transparent;
    }
    /* -------- CSS3 Transform FadeIn ------- */
    #mega li:hover div {
    visibility:visible;
    background-color:#eee;
    }
    /* --------- Within Div Styles --------- */
    #mega div h2 {
    background:#999;
    font-size:1em;
    padding:0 10px;
    margin:10px 0 5px 0;
    clear:both;
    float:left;
    width:330px;
    position:relative; /* makes above drop shadow */
    }
    #mega div p {
    float:left;
    width:106px;
    padding-left:10px;
    position:relative; /* makes above drop shadow */
    }
    #mega div p a {
    text-decoration:underline;
    float:left;
    clear:left;
    width:100%; /* For IE6/7 */
    line-height:1.4;
    }
    #mega div a:hover, #mega div a:focus, #mega div a:active {
    text-decoration:none;
    }
    </style> 
    </head>
    <body>
    
    <div id="wrap">
    <ul id="mega">
        <li><a href="#">HOME</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
          </div>
        </li>
        <li><a href="#">ABOUT</a></b>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Dance</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Perform</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Math</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
          </div>
        </li>
        <li><a href="#">SCHOOLS</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
            <h2>Months</h2>
            <p><a href="#">Janary</a><a href="#">February</a><a href="#">March</a><a href="#">April</a></p>
            <p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href="#">August</a></p>
            <p><a href="#">September</a><a href="#">October</a><a href="#">November</a><a href="#">December</a></p>
          </div>
        </li>
        <li class="dif"><a href="#">MAP</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Math</a><a href="#">Cooking</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Algebra</a><a href="#">Fitness</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Training</a><a href="#">Web Design</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
          </div>
        </li>
        <li class="dif"><a href="#">SUPPORT</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a></p>
            <p><a href="#">Names</a><a href="#">Study</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a><a href="#">Mack</a><a href="#">Fred</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Lemmon</a><a href="#">Stone</a><a href="#">Bella</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Shannon T</a><a href="#">Sarah</a><a href="#">Ralph</a></p>
          </div>
        </li>
        <li class="dif"><a href="#">CONTACT</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Madeline</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
          </div>
        </li>
      </ul>
    <div id="content">
    <h1>CSS3 Mega Drop Down Menu Demo</h1>
    <h2>CSS3, No Images, No JS, Graceful Degradation in IE8/less</h2>
    <h3><a href="css3-mega-drop-down.php">&laquo; Back To Tutorial</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat. Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue consequat ac, ultrices venenatis nulla.</p>
    </div>
    </div>
    
    </body>
    </html>

  9. #9
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Thanks Ray. Yes that's what I had in mind if it were not for the li. I need the li to fadeIn and FadeOut along with the hidden div. Thats part of the delima I'm afraid. However, you were able to show that it can be done with the div so it gives promise. The only problem is the li can't simply fade out as it needs to remain visible. That's what led me to the keyframe as a possible answer and it worked. So I was happy for about 5 minute until I realized that now that I had my cake I wanted to eat it to and fadeout. I'm sure there is some way. I have the li, a. and div to work with as hooks. It will probably need a little outside the box thinking.

  10. #10
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Like maybe as a last ditch effort I could stick a "b" in the div - AP directly behind the li - with the exact same styling as the li - when the li pops back into normal state the "b" will still be sitting there fading out along with the div - with the anchor text showing through as it fades out. That could work. I would however like to do it cleaner than that. But if now one shows a solution ill try that. Because that's the only idea I have. A little mix of old school css with new school css3. That's if it works. I may of just made that up in my head just now.

  11. #11
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Ok here is proof of concept. Working off what Ray posted. Then I shoved in the "b". Hover over the "HOME" link and you can see the li fades in/out with the div. it's rough and lots of things to fix but it seems to work that way. It's seems a little messy though in the css. Doesn't make as much sense to me. Maybe I'll run with it maybe not. But that's one way to do it.

    Code CSS:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
    <html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>CSS3 Mega Drop Down Menu | Demo | { visibility: inherit; }</title>
    <style type="text/css">
    * {
    margin:0; 
    padding:0; 
    }
    html, body {
    height:100%;
    background:#666;
    }
    #wrap {
    min-height:100%; 
    width:905px; 
    margin:-1px auto 0;
    background:#ccc;
    border:1px solid #000;
    border-bottom:0;
    }
    #content h1 {
    padding:40px 80px 0;
    }
    #content h2, #content p, #content a {
    padding:15px 80px;
    color:#000;
    }
    /* ---------- Mega Drop Down --------- */
    #mega {
    list-style:none;
    font-weight:bold;
    height:2em;
    margin:60px -1px 0 0;
    }
    #mega li {
    background:#999;
    border:1px solid #000;
    margin-left:-1px;
    float:left;
    width:150px;
    text-align:center;
    position:relative;
    z-index:1;
    }
    #mega li:hover {
    border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
    padding:12px 0 1px 0;
    margin-top:-12px;
    border-radius:6px 6px 0 0;
    box-shadow:0 1px 8px #000;
    z-index: 2;
    }
    #mega div b {
    position:absolute;
    top: -2em;
    height:1.45em;
    left: 0;
    width: 150px;
    background:#eee;
    border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
    padding:12px 0 10px 0;
    margin-top:-12px;
    border-radius:6px 6px 0 0;
    }
    #mega a {
    color:#000;
    outline:0;
    text-decoration:none;
    display:block;
    line-height:2em;
    }
    #mega li:hover a { /* hide top shadow on div */
    /*background:#eee; moved to #mega li:hover div*/
    position:relative;
    z-index:3;
    }
    /* ----------- Hide/Show Div ---------- */
    #mega  div {
    position:absolute;
    /*left:-999em;*/
    left:-1px;top:auto;
    margin-top:1px;
    width:350px;
    padding:0 10px 10px;
    border:1px solid #000;
    border-top:0;
    font-weight:normal;
    text-align:left;
    box-shadow:0 2px 8px #000;
    border-radius:0 0 6px 6px;
    }
     
    #mega li.dif div { /*removed :hover here*/
    left:-221px;
    }
    #mega li div {
    -moz-transition: all .65s ease-in-out;
    -webkit-transition: all .65s ease-in-out;
    -o-transition: all .65s ease-in-out;
    -ms-transition: all .65s ease-in-out;
    transition: all .65s ease-in-out;
    visibility:hidden;
    background-color:transparent;
    opacity:0;
    }
    /* -------- CSS3 Transform FadeIn ------- */
    #mega li:hover div {
    visibility:visible;
    background-color:#eee;
    opacity:1;
    }
    /* --------- Within Div Styles --------- */
    #mega div h2 {
    background:#999;
    font-size:1em;
    padding:0 10px;
    margin:10px 0 5px 0;
    clear:both;
    float:left;
    width:330px;
    position:relative; /* makes above drop shadow */
    }
    #mega div p {
    float:left;
    width:106px;
    padding-left:10px;
    position:relative; /* makes above drop shadow */
    }
    #mega div p a {
    text-decoration:underline;
    float:left;
    clear:left;
    width:100%; /* For IE6/7 */
    line-height:1.4;
    }
    #mega div a:hover, #mega div a:focus, #mega div a:active {
    text-decoration:none;
    }
    </style> 
    </head>
    <body>
     
    <div id="wrap">
    <ul id="mega">
        <li><a href="http://google.com">HOME</a>
          <div><b></b>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
          </div>
        </li>
        <li><a href="#">ABOUT</a></b>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Dance</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Perform</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Math</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
          </div>
        </li>
        <li><a href="#">SCHOOLS</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
            <h2>Months</h2>
            <p><a href="#">Janary</a><a href="#">February</a><a href="#">March</a><a href="#">April</a></p>
            <p><a href="#">May</a><a href="#">June</a><a href="#">July</a><a href="#">August</a></p>
            <p><a href="#">September</a><a href="#">October</a><a href="#">November</a><a href="#">December</a></p>
          </div>
        </li>
        <li class="dif"><a href="#">MAP</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a><a href="#">Math</a><a href="#">Cooking</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a><a href="#">Algebra</a><a href="#">Fitness</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a><a href="#">Training</a><a href="#">Web Design</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a></p>
          </div>
        </li>
        <li class="dif"><a href="#">SUPPORT</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a></p>
            <p><a href="#">Names</a><a href="#">Study</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a><a href="#">Mack</a><a href="#">Fred</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Lemmon</a><a href="#">Stone</a><a href="#">Bella</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Shannon T</a><a href="#">Sarah</a><a href="#">Ralph</a></p>
          </div>
        </li>
        <li class="dif"><a href="#">CONTACT</a>
          <div>
            <h2>Classes</h2>
            <p><a href="#">Times</a><a href="#">Schedual</a><a href="#">Map</a></p>
            <p><a href="#">Names</a><a href="#">Study</a><a href="#">Directions</a></p>
            <p><a href="#">Health</a><a href="#">Dance</a><a href="#">Biology</a></p>
            <h2>Teachers</h2>
            <p><a href="#">Billy</a><a href="#">Madeleine</a><a href="#">Lauren</a><a href="#">Steve</a></p>
            <p><a href="#">Paddington</a><a href="#">Stefan</a><a href="#">Michael</a><a href="#">Madeline</a></p>
            <p><a href="#">Shannon</a><a href="#">Mary</a><a href="#">Raffaello</a><a href="#">Lorence R</a></p>
            <h2>Location</h2>
            <p><a href="#">Carlsbad</a><a href="#">Oceanside</a><a href="#">El Cajon</a></p>
            <p><a href="#">Vista</a><a href="#">La Costa</a><a href="#">Encinitas</a></p>
            <p><a href="#">San Diego</a><a href="#">Los Angles</a><a href="#">Cardiff</a></p>
          </div>
        </li>
      </ul>
    <div id="content">
    <h1>CSS3 Mega Drop Down Menu Demo</h1>
    <h2>CSS3, No Images, No JS, Graceful Degradation in IE8/less</h2>
    <h3><a href="css3-mega-drop-down.php">&laquo; Back To Tutorial</a></h3>
    <p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Quisque tempor. Nam in libero vel nisi accumsan euismod. Quisque quis neque. Donec condimentum, enim convallis vestibulum varius, quam mi accumsan diam, sollicitudin ultricies odio ante vitae purus. Etiam ultricies quam. Vestibulum turpis turpis, fermentum ut, accumsan quis, tempor at, ipsum. Nam felis elit, sollicitudin id, ultrices faucibus, fringilla vel, dui. Aliquam tincidunt iaculis eros. Sed in lorem. Nullam eu enim. Quisque tristique pretium diam. Fusce tempor sollicitudin ligula. Donec purus eros, mattis quis, mattis vestibulum, congue quis, felis. Nulla facilisi. Nam ultricies posuere justo. In feugiat. Ut lacus neque, interdum in, nonummy ac, placerat a, lorem. In interdum vulputate lectus. Aenean libero elit, eleifend id, tincidunt id, tristique eu, tortor. Pellentesque urna dolor, placerat a, pharetra eget, congue ut, ligula. Sed mi. Nunc volutpat. Donec pharetra accumsan lacus. Integer pede orci, vehicula vitae, porttitor id, pulvinar vel, nisi. Aliquam mauris ligula, eleifend sit amet, eleifend sit amet, luctus at, turpis. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue. Sed neque orci, tincidunt id, tempus condimentum, eleifend a, nisl. Etiam auctor. Donec lectus lacus, consequat ac, ultrices venenatis, imperdiet vel, erat. In porttitor augue at tellus commodo pharetra. Sed non nibh. Sed sapien ipsum, fringilla condimentum, consectetuer vitae, convallis eu, urna. Aenean id elit eu nulla aliquet congue. Sed fringilla nonummy nisi. Donec aliquet. Quisque varius. Vivamus ut nulla. Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Integer lacinia. In leo nulla, molestie ac, dignissim sed, pulvinar at, odio. Duis sit amet augue consequat ac, ultrices venenatis nulla.</p>
    </div>
    </div>
     
    </body>
    </html>

  12. #12
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Here it is in action. Fadeout currently only ugglily works on the Home link. http://www.visibilityinherit.com/projects/FadeOut.html

    Ray if you can figure out how to hide that bottom shadow on the b or li that would be great. I messed with it for about an hour and temporarily gave up.

  13. #13
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,598
    Mentioned
    65 Post(s)
    Tagged
    2 Thread(s)
    Sorry guys, I tried something that turned out to be really wrong. Deleted it.

  14. #14
    Ripe Tomatos silver trophybronze trophy Rayzur's Avatar
    Join Date
    Jun 2007
    Location
    Texas
    Posts
    4,174
    Mentioned
    4 Post(s)
    Tagged
    0 Thread(s)
    Eric, it looks like you need to adjust your box shadow a little bit.

    This helps hide the bottom shadow but it's not perfect.

    Code:
    #mega li:hover {
    border-bottom:0; /* border-bottom:0; and padding-bottom:1px; keeps <li> and <div> connected */
    padding:12px 0 1px 0;
    margin-top:-12px;
    border-radius:6px 6px 0 0;
    box-shadow:0 -2px 4px #000;
    z-index: 2;
    }

  15. #15
    Non-Member
    Join Date
    Dec 2012
    Posts
    1
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    i had this similar problem with mega menu.. any way i have correct it.. Thanks all l



    My blog: <snip></snip>
    Last edited by molona; Dec 13, 2012 at 07:07. Reason: link deleted

  16. #16
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,658
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by unaisc View Post
    i had this similar problem with mega menu.. any way i have correct it.. Thanks all l

    My blog: <snip></snip>
    Ray posted how to fade both ways above. Here is how I did fade in. http://www.visibilityinherit.com/cod...-down-demo.php. I'll prob just use the fade in as it is cleaner on the css


Bookmarks

Posting Permissions

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