Блог

Главная - Вопросы по программированию - Мега меню CSS в стиле Very Style

Мега меню CSS в стиле Very Style

#javascript #jquery #jquery-ui #css

#javascript #jquery #jquery-пользовательский интерфейс #css

Вопрос:

Я рассматриваю возможность создания навигационного меню, похожего по стилю на Very.co.uk

Кто-нибудь может указать мне правильное направление относительно того, с чего начать, и лучших практик?

Спасибо

Ответ №1:

Попробуйте мега выпадающие меню с использованием CSS и jQuery
В нем есть хороший туториал и демо.

Ответ №2:

Что-то вроде этого является основной идеей…

Демо:http://jsfiddle.net/hgZGS

jQuery…

 
$('#menu span').hide();
$('#menu li').hover(function() {



 var offset = $(this).offset();
$(this).find('span').css('marginLeft', offset.left   'px');
$(this).find('span').show();

var offsetRight = offset.left   $(this).find('span').width();
var ww = $(window).width();
var fixed = offset.left   $(this).width() - $(this).find('span').width();

if (offsetRight > ww) {
    $(this).find('span').css('marginLeft', fixed   'px');
}
else {
    $(this).find('span').css('marginLeft', offset.left   'px');
}
  


}, function() {

    $(this).find('span').hide();

});



  




CSS…


 
#menu {
    margin: 20px;   
}
#menu LI {
    display: block;
    float: left;
    border-right: 1px solid #fff;
    background-color: #ccc;
    padding: 5px;
    cursor: pointer;

}
#menu SPAN {
    display: block;
    position: absolute;
    width: 200px;
    height: 100px;
    background-color: #E2E2E2;
    left: 0px;
    margin-top: 5px;
    padding: 5px;
}
  


HTML…


 <ul id="menu">
    <li>The Quick<span>Quick</span></li>
    <li>Brown<span>Brown</span></li>
    <li>Fox<span>Fox</span></li>
    <li>Jumps<span>Jumps</span></li>
    <li>Over<span>Over</span></li>
    <li>Then<span>The</span></li>
    <li>Tall<span>Tall</span></li>
    <li>White<span>White</span></li>
    <li>Fence<span>Fence</span></li>
</ul>

Комментарии:

1. Это именно та база, с которой я хотел работать, спасибо.

Ответ №3:

лучшее начало — создать структуру, подобную 

 <ul>
<li><a href="">Menu</a><div class="subnav">any popunder content</div></li>
...
</ul>

затем сделайте <li> относительным левым плавающим блоком, а .subnav — абсолютным позиционированием:

 ul li { float: left; display: block; position: relative }
ul li .subnav { display: none; position: absolute; top: 0; left: 0 }
/* you may need to edit top and left to fit your needs */

затем с помощью css вы можете сделать:

 ul li:hover .subnav { display: block }

и дублировать через jquery для браузеров старой школы

 $('ul li').hover(
  function() { $(this).find('.subnav').css('display', 'block') },
  function() { $(this).find('.subnav').css('display', 'none') }
);

это может стать началом ваших исследований 🙂