0

I have created a mega menu with CSS and was looking for a way to have it so that when the user hovers over the main part of the menue, it would push downt the rest of the content below instead of having the mega menu hover over the content.

So look more like this: enter image description here

Instead of how it does here: http://jsfiddle.net/ZwV5K/1/

Here is my html:

<div id="root">
  <div class="header-wrap">
    <div class="header">
      <div class="logo"><a href="<?php print $front_page; ?>" title="<?php print t('Home'); ?>"><img src="<?php print $logo; ?>" alt="<?php print t('Home'); ?>" /></a></div>
      <div class="menu-wrapper">
            <ul class="nav">
            <li>
                <a href="#">Blah</a>
            </li>
            <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li>
            <a href="#">More Blah</a>
            <div>
                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>

                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>

                    <h3><a href="#">Blah blah</a></h3>
                </div>
            </div>
            </li>
        <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li>
            <a href="#">Blah blah</a>
            <div>
                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>

                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">More</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                </div>
        <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li><a href="#">Blah blah</a></li>
        <li><img src='themes/pavone/files/img/background/nav-border.png' /></li>
        <li>
            <a href="#">Blah blah</a>
            <div>
                <div class="nav-column">
                    <h3><a href="#">Blah blahs</a></h3>

                    <h3><a href="#">Blah blah</a></h3>
                </div>

                <div class="nav-column">    
                    <h3><a href="#">Blah blah</a></h3>
                    <ul>
                        <li><a href="#">Blah blahh</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                        <li><a href="#">Blah blah</a></li>
                    </ul>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blahs</a></h3>
                </div>

                <div class="nav-column">
                    <h3><a href="#">Blah blah</a></h3>
                </div>
            </div>
        </li>
    </ul>
</div>
</div>


$main_menu)) ?>

And here is my CSS:

.header-wrap,
.nav-wrap,
.slideshow-wrap,
.body-wrap,
.sub-footer-wrap,
.footer-wrap {float: left; width: 100%; clear: both;}

.header,
.nav,
.slideshow,
.body,
.sub-footer,
.footer { width: 100%; margin: 0 auto; font-family: ariel;}

.header-wrap { height: 100px; background: #00476A repeat-x;}
.nav-wrap { height: 70px; background: grey; border-top: 1px solid #DBDDC0; border-    bottom: 1px solid #D9DBCE}
.body-wrap { background: #AACBFF; padding-top:30px; padding-bottom:30px;}
.footer-wrap { background: rgba(255,255,255,.8); position:fixed; left:0px; bottom:0px;     height: 90px;}

.header .logo { float: left; margin-top: 30px;}
/* Menu Container */
.menu-wrapper { float: right; margin-top: 25px; width: 75%}
.nav { display: inline-block; position: relative; cursor: default; z-index: 500;     float:right;}
/* Menu List */
.nav > li { display: block; float: left; background: #00476A; }
.nav li img { padding-top: 15px; padding-bottom: 12px; }
/* Menu Links */
.nav > li > a { position: relative; display: block; z-index: 510; height: 54px;     padding: 0 20px; line-height: 54px; text-decoration:none; font-family: Helvetica,     Arial, sans-serif;
            font-size: 13px; color: #ffffff; text-shadow: 0 0 1px     rgba(0,0,0,.35); background: #00476A; }
.nav li a:hover { color: #70D5FE}
.nav > li:first-child > a { border-radius: 3px 0 0 3px; border-left: none; }
/* Menu Dropdown */
.nav > li > div { position: absolute; display: block; width: 100%; top: 50px; left: 0;     opacity: 0; visibility: hidden; overflow: hidden; background: #00476A; border-radius: 0 0     3px 3px; }
.nav .nav-column ul { list-style: none;}
.nav .nav-column ul li { margin-left:-40px; text-decoration:none; margin-bottom:-5px;}
.nav .nav-column ul li a { text-decoration:none; font-size:11px;}
.nav > li:hover > div { opacity: 1; visibility: visible; overflow: visible; }
/* Menu Content Styles */
.nav .nav-column { float: left; width: 130px; padding-top: 30px; padding-left:     10px; padding-right: 10px; }
.nav .nav-column h3 { margin: 10px 0 0 0; font-family: Helvetica, Arial, sans-serif;     font-size: 11px; color: #70D5FE; }
.nav .nav-column h3 a { color: #70D5FE; text-decoration: none; }
.nav .nav-column li a { display: block; line-height: 26px; font-family: Helvetica, Arial, sans-serif; font-size: 13px; color: #ffffff; }    
.header .phone { float: right; font-size: 25px; color: #2C6899; font-weight: bold; text-shadow:1px 1px 3px #FFFFFF;}

#edit-custom-search-blocks-form-1--2 { height: 25px; padding-left: 5px;}
#custom-search-blocks-form-1 { margin-top: 20px; margin-right: 325px; }
.nav .search { float: right; position:inheret;}
.nav li {display: inline;}
.nav a {float: right; font-size: 17px; padding-right: 40px; padding-top: 10px; color: #4A4A48; text-decoration: none; }    
.nav a:hover { }
.nav li a.active { float: right; font-size: 17px; margin-top: 0px; color: #4A4A48;         text-decoration: none; }

You can probably see the HTML and CSS code better on my jsfiddle page. Any kind of help/information would be much appreciated! Thank you!

scapegoat17
  • 5,509
  • 14
  • 55
  • 90
  • i don't understand problem... so i suppose problem is in that when you hover on main part of menu it push down rest of menu, but when you hover on rest part - menu makes unvisible? – user2167382 Dec 17 '13 at 16:35
  • I would like the mega menu to push down the content below (that is not in the mega menu). Like for example that grey header below it. I would like whent he mega menu is being hovered over, to push the grey menu down. – scapegoat17 Dec 17 '13 at 17:00

2 Answers2

0

That is because the width of the menu doesn't fit the fiddle. If you add more width to the screen it will work as you want (I'm attaching my screenshot)Screenshot.

Anyway, I would suggest using responsive width so the menu would always fit in one row.

This can be achieved as this:

You have nine li tags, so the width would be 1/9= 0.11 = 11%, but i prefer leaving extra space. So I would suggest:

width: 10%;

For each li.

If you shrink the window to much the text will not fit as well. You can lock the behaviour of the parent divs using media queries.

Tell me how it works or if you need another workaround.

tomascharad
  • 3,156
  • 23
  • 24
  • I guess I wasn't as clear as I thought with this. Or perhaps, i am confused by your response. What i would like to do with the mega menu is have it so that when it hovers, it pushes down the rest of the content below. I am not worried about the width of it. I was just doing that as a quick way of putting my code up to the fiddle. So to be a little more clear. When I hover over `more blah` i want the content below to not hover over the grey header below it, but instead push the grey header below it down. Hope that this better explains what mean – scapegoat17 Dec 17 '13 at 16:59
0

Ok, given your comment, this may be useful:

First take away the background color of the

  • tags: Blah, More Blah, Blah Blah, etc.. 
    background: #00476A;

    Then add this css to each of the parent divs of the .nav-columns divs (the one that contains the columns and hasn't any class or id):

    position: relative;
width: 723px;
height: 300px;
top: 147px;

    Check height and width for each of them to adjust to your needs. You have to consider that this is not a responsive solution.

    • tomascharad
    • 3,156
    • 23
    • 24
    • That didn't work and does pretty much the same thing it did before. Would you be able to show an update of my jsfiddle showing the changes that you made? – scapegoat17 Dec 17 '13 at 20:10