сделать всплывающее меню навигации

Question

сделать всплывающее меню навигации

0

У меня довольно простой, но я просто не могу понять. Я участвую в базовом классе HTML и CSS, и завтра у меня назначено задание, но я не могу получить свою навигацию до спецификации.

Он должен выглядеть и всплывать так:

http://ista230.com/images/assignments/7/page1.jpg

http://ista230.com/images/assignments/7/page2.jpg

Прямо сейчас я просто пытаюсь заставить divs всплывать, но я застреваю. Сначала я использовал ul для моих навигационных ссылок, но я видел некоторые другие примеры с использованием div. Так вот, где я нахожусь.

Heres HTML для навигации:

<nav id="nav">
       <a href="#"><div class="navItem">Home</div></a>
       <a href="#"><div class="navItem">Upcoming Flights</div></a>
       <a href="#"><div class="navItem">About Us</div></a>
       <a href="#"><div class="navItem">Travel Guide</div></a>
       <a href="#"><div class="navItem">Contact Us!</div></a>
</nav>

И вот что я до сих пор использовал для CSS:

/* Navigation */
nav{
    margin-left:5%;
    margin-right:5%;
    margin-bottom:5%;
    margin-top:10%;
    width:100%;
}

#nav a{
    text-decoration:none;
    color:black;
}

div.navItem
{

    list-style:none;
    padding:2% 4%;
    display:inline;
    background-color:orange;
    border:5px solid #597CBB;
    border-radius:10px;
}
.navItem div{

    -moz-transition: height 1s ease; /* Firefox 4 */
    -webkit-transition: height 1s ease; /* Safari and Chrome */
    -o-transition: height 1s ease; /* Opera */
    -ms-transition: height 1s ease; /* IE9 (maybe) */
    transition:height 1s ease;

}

.navItem:hover div
{
    height:500px;
}

Greg 11 нояб. 2013, в 04:41

Источник

1

Ваш css говорит .navItem:hover div , но «navItem» - это класс самого div, у которого нет дочернего div. Я не хочу выполнять ваше задание за вас, поэтому просто скажу, что вам нужен селектор :hover для чего-то другого. Кроме того, я думаю, что использование списка было бы хорошо для вас здесь. Это список ссылок.
davidpauljunior 11 нояб. 2013, в 03:47
0

Так что-то вроде div.navItem: hover?
Greg 11 нояб. 2013, в 03:54
1

И вместо display: inline , попробуйте переключить это для display: inline-block
davidpauljunior 11 нояб. 2013, в 03:58
0

Хорошо, последний вопрос. Делать это работало, но деления распространяются вниз. Я пытался использовать отрицательную высоту, но это сломало ее. Есть идеи?
Greg 11 нояб. 2013, в 04:07
1

Конечно, я думал, что это будет дальше! Посмотрите на изображения, которые вы разместили, вы можете увидеть большой промежуток над меню, готовый для пунктов, чтобы перейти в. Итак, рассмотрите возможность установки height или min-height для <nav> или добавьте несколько отступов вверху. Тогда вам просто нужно разобраться, как расположить (подсказку) пункты меню в нижней части <nav>
davidpauljunior 11 нояб. 2013, в 04:26
0

Так что теперь я получаю элементы, которые расширяются вертикально, увеличивая отступы. Тем не менее, это толкает остальную часть моего контента вниз. Я пробовал несколько разных комбинаций позиционирования в навигации и других областях контента, но это не помогло решить проблему.
Greg 11 нояб. 2013, в 04:39
0

давайте продолжим эту дискуссию в чате
Greg 11 нояб. 2013, в 04:57

Показать ещё 5 комментариев

Теги:

html

css

web

1 ответ

Ещё вопросы

Ваш css говорит .navItem:hover div , но «navItem» - это класс самого div, у которого нет дочернего div. Я не хочу выполнять ваше задание за вас, поэтому просто скажу, что вам нужен селектор :hover для чего-то другого. Кроме того, я думаю, что использование списка было бы хорошо для вас здесь. Это список ссылок.
И вместо display: inline , попробуйте переключить это для display: inline-block
Хорошо, последний вопрос. Делать это работало, но деления распространяются вниз. Я пытался использовать отрицательную высоту, но это сломало ее. Есть идеи?
Конечно, я думал, что это будет дальше! Посмотрите на изображения, которые вы разместили, вы можете увидеть большой промежуток над меню, готовый для пунктов, чтобы перейти в. Итак, рассмотрите возможность установки height или min-height для <nav> или добавьте несколько отступов вверху. Тогда вам просто нужно разобраться, как расположить (подсказку) пункты меню в нижней части <nav>
Так что теперь я получаю элементы, которые расширяются вертикально, увеличивая отступы. Тем не менее, это толкает остальную часть моего контента вниз. Я пробовал несколько разных комбинаций позиционирования в навигации и других областях контента, но это не помогло решить проблему.
давайте продолжим эту дискуссию в чате

bitoffdev · Answer 1 · 2013-11-11T01-28-00.000Z

Как и davidpauljunior, вам нужно изменить .navItem:hover div to div.navItem:hover, потому что вы не navItem div внутри класса navItem - вы сами модифицируете div с классом navItem.

Вам также необходимо изменить отображение класса navItem для display:inline-block чтобы вы могли установить высоту div. Вы не можете установить высоту display:inline элемент.

Вот изменения, которые нужно внести в css:

/* Navigation */
nav{
    margin-left:5%;
    margin-right:5%;
    margin-bottom:5%;
    margin-top:10%;
    width:100%;
}

#nav a{
    text-decoration:none;
    color:black;
}

div.navItem
{

    list-style:none;
    padding:2% 4%;
    display:inline-block;
    background-color:orange;
    border:5px solid #597CBB;
    border-radius:10px;
    -moz-transition: height 1s ease; /* Firefox 4 */
    -webkit-transition: height 1s ease; /* Safari and Chrome */
    -o-transition: height 1s ease; /* Opera */
    -ms-transition: height 1s ease; /* IE9 (maybe) */
    transition:height 1s ease;

}

div.navItem:hover{
    height:500px;
}