1

Здравствуйте! Как сделать чтобы при наведении курсора на вертикальное меню , категория открывалась? Открывалась вправо. Ни вниз, ни вверх, а вправо.

3 ответа 3

3

Судя по вашей HTML-структуре, на валидацию, как я понимаю, вы чихать хотели )) Ну да ладно... jQuery вы используете, поэтому прописываете для списка подкатегорий абсолютное позиционирование в CSS, а в JS высчитываете положение родительского пункта меню

var posTop = $('parent_point').offset().top;
var posLeft = $('parent_point').offset().left + $('parent_point').width();

и задаете эти координаты для списка подпунктов.

3

Я делал решениеи с использование только CSS для несложного меню. HTML код:

<div class="main_menu_item">
    <a href="/billing/">Billing</a>
    <div class="submenu">
        <div><a href="/billing/">Manage orders and invoices</a></div>
    </div>
</div>

CSS код:

.submenu
{
    display: none;   
    position: absolute;
    text-align: left;
    background-color: white;
    padding: 5px;border: 1px solid #6B93FF;
}

div.main_menu_item:hover div
{
    display: block;
}

При наведение курсора на ссылку "Billing" Отобразится его подменю, в котором будет ссылка "Manage orders and invoices"

1
  • Поддерживаю решение на CSS. Могу добавить, что выпендрежа ради, можно попробовать не display: none/block, а opacity: 0/1. В случае с прозрачностью можно добавить плавное проявление подменю при помощи transition или animation. Однако, обратите внимание на то, что полностью прозрачные блоки, в отличии от display: none, укладываются поверх других слоев, которые могут содержать кликабельные элементы. Так что помимо opacity нужно еще и с z-index поиграть. Так же задумайтесь, что будет с вашем меню на ТАЧ-устройствах.
    – Cypher
    27 авг 2012 в 11:13
2

И так если не подключая никаких скриптов обычно используя html и css то решение таково или по крайней мере как сделал бы я:

html содержание то есть само меню


<!--menu start-->

<ul class="menu">

    <li class="menu__item">
        <a href="#" class="menu__item__link">Home</a>
        <div class="menu__item__sublist">
            <ul>
                <li class="menu__item__sublist_item">
                    <a href="#" class="menu__item__sublist_link">Submenu1</a>
                </li>
                <li class="menu__item__sublist_item">
                    <a href="#" class="menu__item__sublist_link">Submenu1</a>
                </li>
                <li class="menu__item__sublist_item">
                    <a href="#" class="menu__item__sublist_link">Submenu1</a>
                </li>
            </ul>
        </div>
    </li>

    <li class="menu__item">
        <a href="#" class="menu__item__link">About</a>
        <div class="menu__item__sublist">
            <ul>
                <li class="menu__item__sublist_item">
                    <a href="#" class="menu__item__sublist_link">Submenu1</a>
                </li>
                <li class="menu__item__sublist_item">
                    <a href="#" class="menu__item__sublist_link">Submenu1</a>
                </li>
                <li class="menu__item__sublist_item">
                    <a href="#" class="menu__item__sublist_link">Submenu1</a>
                </li>
            </ul>
        </div>
    </li>

</ul>
<!--menu end-->

Теперь сам CSS

/ menu -------------------------/

.menu {
    width: 98px;
    border: 1px solid #000;
    }

    /* menu__item
       -------------------------*/
    .menu__item {
        position: relative;
        top: 0;
        left: 0;
        list-style-type: none;
        }

        /* menu__item__link
           -------------------------*/
        .menu__item__link {
            display: block;
            text-decoration: none;
            }

        /* menu__item__sublist
           -------------------------*/
        .menu__item__sublist {
            position: absolute;
            top: 0;
            left: 98px;
            padding: 0 0 0 2px;
            display: none;
            }
        .menu__item:hover .menu__item__sublist { display: block; }

            /* menu__item__sublist UL
               -------------------------*/
            .menu__item__sublist UL {
                }

                .menu__item__sublist_item {
                    list-style-type: none;
                    }

                    .menu__item__sublist_link {
                        display: block;
                        text-decoration: none;
                        }

Ширина меню задана (98px) для того чтобы выпадающее меню у вас было закреплено. Если уберете бордер то не забудьте два пикселя вернуть (100px). Остально думаю по комментам разберете.

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.