Мега Меню CSS - Меню Заголовка Push Down Content Ниже

0

Я создал мега-меню с CSS и искал способ получить его так, чтобы, когда пользователь наводил верх над основной частью меню, он уменьшал бы остальную часть содержимого ниже, вместо того, чтобы накладывать мега-меню на содержание.

Итак, больше походите на это: Изображение 174551

Вместо того, как это делается здесь: http://jsfiddle.net/ZwV5K/1/

Вот мой 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))?>

И вот мой 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; }

Вероятно, вы можете лучше видеть код HTML и CSS на моей странице jsfiddle. Любая помощь/информация будут высоко оценены! Спасибо!

  • 0
    Я не понимаю проблемы ... поэтому я предполагаю, что проблема в том, что когда вы наводите курсор мыши на основную часть меню, он нажимает на остальную часть меню, но когда вы наводите курсор мыши на оставшуюся часть - меню делает невидимым?
  • 0
    Я хотел бы, чтобы мегаменю выдвигало содержимое ниже (которого нет в мегаменю). Как например тот серый заголовок под ним. Хотелось бы, чтобы мегаменю висело над ним, чтобы оттолкнуть серое меню вниз.
Теги:
megamenu

2 ответа

0

Хорошо, учитывая ваш комментарий, это может быть полезно:

Сначала уберите цвет фона

теги: Blah, More Blah, Blah Blah и т.д. 
background: #00476A;

Затем добавьте этот css в каждый из родительских divs.nav-columns divs (тот, который содержит столбцы и не имеет никакого класса или id):

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

Проверьте высоту и ширину каждого из них, чтобы они соответствовали вашим потребностям. Вы должны учитывать, что это не отзывчивое решение.

Поделиться
  • 0
    Это не сработало и делает то же самое, что и раньше. Сможете ли вы показать обновление моего jsfiddle, показывающее внесенные вами изменения?
0

Это потому, что ширина меню не соответствует скрипке. Если вы добавите больше ширины на экран, он будет работать так, как вы хотите (я прикрепляю свой снимок экрана) Изображение 174551.

Во всяком случае, я бы предложил использовать гибкую ширину, чтобы меню всегда вписывалось в одну строку.

Это может быть достигнуто следующим образом:

У вас есть девять тегов li, поэтому ширина будет 1/9 = 0,11 = 11%, но я предпочитаю оставлять лишнее пространство. Поэтому я бы предложил:

width: 10%;

Для каждого li.

Если вы сжимаете окно до большого количества текста, оно не подходит. Вы можете заблокировать поведение родительских divs, используя медиа-запросы.

Скажите мне, как это работает или вам нужно другое обходное решение.

Поделиться
  • 0
    Я думаю, что я не был так ясен, как я думал с этим. Или, возможно, я смущен вашим ответом. Что я хотел бы сделать с мегаменю, так это чтобы оно, когда оно зависало, выталкивало оставшуюся часть содержимого ниже. Я не беспокоюсь о его ширине. Я просто делал это как быстрый способ поставить свой код на скрипку. Так что, чтобы быть немного более понятным. Когда я наведу курсор мыши на more blah я хочу, чтобы содержимое ниже не зависало над серым заголовком под ним, а вместо этого нажимало на серый заголовок под ним вниз. Надеюсь, что это лучше объясняет, что значит

Ещё вопросы

Сообщество Overcoder
Наверх
Меню