WedX - журнал о программировании и компьютерных науках

Полноразмерное горизонтальное меню с вертикальным подменю, которое имеет вертикальное дочернее меню

Мне нужны некоторые коды или открытый исходный код, где мне нужно меню такого типа:

меню 1:

меню 2:

Изображение Меню 1 — это подменю из основной навигации и

Изображение Меню 2 является вертикальным, и если подменю длиннее одного столбца (высота определена как на изображении), оно переходит во второй столбец, а дальнейшее дочернее подменю подменю перемещается вправо, заменяя «Комментарий». ..." как показано на изображениях.

определенная ширина составляет 960 пикселей. (не отвечает)

А это скрипт с минимальным кодом: https://jsfiddle.net/jVfB9/

HTML:

<div id="pageMenu">

    <div id="pageMenuWrapper">
        <a href="index.html" class="pageMenuLink pageMenuLinkSelected">Menu1</a>
        <a href="index.html" class="pageMenuLink">Menu2</a>
        <a href="index.html" class="pageMenuLink">Menu3</a>
    </div>

</div>

CSS:

#pageMenu{
    position:relative;
    width:960px;
    height:100px;
    margin:auto;
    }
#pageMenuWrapper{
    position:absolute;
    top:0px;
    left:0px;
    height:88px;
    }
.pageMenuLink{
    float:left;
    font-family: 'ProximaNova';
    font-size:16px;
    display:block;
    padding:2px 6px;
    color:#000;
    text-decoration:none;
    line-height:30px;
    text-align:center;
    }
.pageMenuLink:hover{
    background-color:#D8DBE1;
    }
.pageMenuLinkSelected{
    background-color:#d8dbe1;
    }

  • Этот вопрос может быть не по теме: вопросы, касающиеся кода, должны демонстрировать минимальное понимание решаемой проблемы. Включите предпринятые решения, почему они не сработали и ожидаемые результаты. 18.01.2014
  • ну, я забыл добавить это: вот мой код: goo.gl/Rgamzk Это только верхнее меню.. , как я могу расширить это? 18.01.2014
  • Ну лучше от этого не стало. Пожалуйста, разместите соответствующий код здесь или сделайте демонстрацию онлайн-инструментов, таких как jsfiddle или jsbin. 18.01.2014
  • А это скрипт с минимальным кодом: jsfiddle.net/jVfB9 18.01.2014

Ответы:


1

Вот мое решение моего собственного вопроса, это заняло некоторое время, но я решил его:

это моя ссылка на скрипт

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

Я попробовал следующий формат CSS

.parent-menu > li > a{
hover style;
}

но это не помогло.

Может ли кто-нибудь предложить мне возможное решение?

Спасибо :)

24.01.2014

2

Итак, я решил это:

это последняя скрипка

все, что мне нужно было сделать, это добавить свойства границы к этим двум классам:

.menu-main li.hover a {
    transition-property: background-color, color;
    transition-duration: 0.1s;
    transition-timing-function: ease-out;
    text-decoration: none;
    height: 50px;
    border-bottom:6px solid #004062;
    }

.submenu li a {
    font:18px/22px 'focobold';
    text-transform:uppercase;
    color: #383838;
    height: auto;
    margin-bottom: 10px;
    margin-left:4px;
    height: auto !important;
    border-bottom:none !important;
    }

Отсюда и 100% рабочее решение моего вопроса. :)

Спасибо

24.01.2014
Новые материалы

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

Работа с цепями Маркова, часть 4 (Машинное обучение)
Нелинейные цепи Маркова с агрегатором и их приложения (arXiv) Автор : Бар Лайт Аннотация: Изучаются свойства подкласса случайных процессов, называемых дискретными нелинейными цепями Маркова..

Crazy Laravel Livewire упростил мне создание электронной коммерции (панель администратора и API) [Часть 3]
Как вы сегодня, ребята? В этой части мы создадим CRUD для данных о продукте. Думаю, в этой части я не буду слишком много делиться теорией, но чаще буду делиться своим кодом. Потому что..

Использование машинного обучения и Python для классификации 1000 сезонов новичков MLB Hitter
Чему может научиться машина, глядя на сезоны новичков 1000 игроков MLB? Это то, что исследует это приложение. В этом процессе мы будем использовать неконтролируемое обучение, чтобы..

Учебные заметки: создание моего первого пакета Node.js
Это мои обучающие заметки, когда я научился создавать свой самый первый пакет Node.js, распространяемый через npm. Оглавление Глоссарий I. Новый пакет 1.1 советы по инициализации..

Забудьте о Matplotlib: улучшите визуализацию данных с помощью умопомрачительных функций Seaborn!
Примечание. Эта запись в блоге предполагает базовое знакомство с Python и концепциями анализа данных. Привет, энтузиасты данных! Добро пожаловать в мой блог, где я расскажу о невероятных..

ИИ в аэрокосмической отрасли
Каждый полет – это шаг вперед к великой мечте. Чтобы это происходило в их собственном темпе, необходима команда астронавтов для погони за космосом и команда технического обслуживания..


Для любых предложений по сайту: [email protected]