Создание раскрывающихся меню CSS3 на горизонтальной панели навигации с эффектом постепенного появления

0

Я пытаюсь получить это право на пару дней, и до сих пор я действительно не добился успеха в том, чтобы заставить раскрывающийся список работать вообще, хотя отчасти потому, что в руководствах, которые я прочитал, все используют символы в CSS, с которым я не знаком, например тильда и символы "больше, чем". В любом случае, вот базовый код, который у меня есть:

<nav class="bg">
    <ul class="width">
        <li><a href="#">Link</a></li>
        <li><a href="#"></a>
            <ul>
                <li><a href="#" title="link">Link</a></li>
                <li><a href="#" title="link">Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS:

.width{margin:0 auto;min-width:1000px;width:84%;}
nav ul{width:100%;text-align:justify;font-size:0;position:relative;}
nav ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;}
nav a{display:inline-block;padding:10px;}

Я думаю, что следующий шаг - поставить display:none; на внутренних элементах <ul> чтобы скрыть их по умолчанию, но следующая часть - это то место, где я теряюсь. Как вы используете CSS, чтобы сделать один объект, когда что-то происходит с другим объектом? В этом случае, как бы вы использовали CSS, чтобы выпадающий список отображался, когда соответствующая ссылка зависала?

  • 0
    Можете ли вы предоставить демо или скрипку или что-то в этом роде?
  • 0
    незнакомы с такими символами, как тильда и «больше, чем», поэтому они называются селекторами , изучите их, и тогда это начнет иметь для вас какой-то смысл ...
Теги:
navbar

4 ответа

0
Лучший ответ

Вот демонстрация

Прежде всего вам нужно понять, как работают CSS-селектора.

Для того, чтобы добавить Dropdown, вы переходите на наведение на родительский элемент и обертываете это вокруг подменю. Затем, если событие hover будет запущено, внутри будет возможность выбрать true: hover

Подобно:

.nav li:hover .sub-menu {
     left: 0;
     top: 100%;
 }

Я также добавил эффект Fade-In. Там вы работаете с css-переходом. Но будьте осторожны, если ваше подменю будет включено/выключено с отображением: block и: no it wont work, я думаю.

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

.nav .sub-menu {
      position: absolute;
      left: -1000px;
      top: -1000px;
      opacity: 0;
      -o-transition: opacity .25s;
      -ms-transition:  opacity .25s;
      -moz-transition: opacity .25s;
      -webkit-transition: opacity .25s;
      transition: opacity .5s;
}

.nav li:hover .sub-menu {
      left: 0;
      top: 100%;
      opacity: 1;
}
  • 0
    Код работает отлично, но через 30 минут я все еще путаюсь с некоторыми селекторами. Мне нужно сделать несколько случайных вещей, чтобы учиться на примере. Спасибо за помощь.
  • 0
    Просто подтвердите список в html и посмотрите, что есть в CSS.
Показать ещё 5 комментариев
0

Вы сами правильно указали проблему, и это:

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

Я думаю, что это простейшая демонстрация, прольет некоторый свет на ваш вышеупомянутый вопрос.

В частности, более глубокий взгляд на CSS в демо.

#circle:hover .popup{
    display : block;
}
0

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

Вы можете посмотреть Pure CSS Dropdown Menu, чтобы узнать, как создать раскрывающееся меню css.

0

Как вы используете CSS, чтобы сделать один объект, когда что-то происходит с другим объектом? В этом случае, как бы вы использовали CSS, чтобы выпадающий список отображался, когда соответствующая ссылка зависала?

li > a ul { display: none; }
li > a:hover ul { display: block; }

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

Ещё вопросы

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