Я пытаюсь создать адаптивную навигационную панель, которая закреплена в верхней части страницы, и с ссылками на полную высоту (100%), чтобы их цвета фона могли изменяться. Мне пока удалось только исправить навигационную панель, а ссылки на разных устройствах совместимы лишь частично. Я собираюсь использовать этот эффект, когда медиа-запросы переводят меню в навигацию, содержащуюся в изображении. http://getbootstrap.com/examples/navbar-fixed-top/. Мне не нравится бутстрап, и я хочу иметь возможность делать это самостоятельно в будущем. Какие-нибудь советы?

Вот код, который у меня есть:

Jade:

голова

ссылка (rel = "stylesheet", href = "/ main.css")

навигационный

ul

   li

       a(href="/") Home

       a(href="/about") About

       a(href="/contact") Contact

А также

МЕНЬШЕ:

nav {

ширина: 100 % ;

высота: 3em;

верх: 0px;

слева: 0px;

положение: фиксированное;

цвет фона: # 000;

ul li a {

   height:100%;

   text-align:center;

   margin-top: -3.5em;

   text-decoration:none;

   padding-right: 9%;

   padding-left: 9%;

   &:hover {

       color:#7f8c8d;

   }

}

}

1
user3172050 21 Янв 2014 в 07:56

1 ответ

Лучший ответ

Я бы переосмыслил fixed расположение вашего заголовка и вместо этого включил бы метод absolute. Мне лично не нравится, когда заголовок постоянно мешает мне, но absolute можно легко изменить на fixed с помощью приведенного ниже кода.

Вот как я обычно это делаю, чтобы все было на высоте.

HTML

<div id="wrapper">
<ul id="navBar">
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
</ul>
</div>

CSS

html, body {
    margin:0;
    padding:0;
    min-width:100%;
    min-height:100%;
}
#wrapper {
    background:#AAA;
    width:100%;
    position:absolute;
    left:0;
    top:0;
}
ul {
    padding:0;
    margin:0;
}
li {
    float:left;
    min-width:50px;
    background:#CCC;
    list-style:none;
    vertical-align:middle;
    padding:15px;
}
li a {  
    color:#000;
}

Или поиграйте сами:

JS FIDDLE: http://jsfiddle.net/SinisterSystems/d83H3/1/


РЕДАКТИРОВАТЬ:

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

JS FIDDLE: http://jsfiddle.net/SinisterSystems/d83H3/2/

0
Nicholas Hazel 21 Янв 2014 в 08:21
Николас, спасибо большое. Вы знаете метод, с помощью которого я могу включить эффект медиа-запроса, такой как показанный на getbootstrap .com / examples / navbar-fixed-top?
 – 
user3172050
21 Янв 2014 в 08:09
Значит, он превращается в значок, а не в меню заданного размера?
 – 
Nicholas Hazel
21 Янв 2014 в 08:15
Обновленный ответ с медиа-запросами. (измените размер окна скрипки до 300 пикселей или меньше).
 – 
Nicholas Hazel
21 Янв 2014 в 08:21
Я не собираюсь создавать для вас все раскрывающееся меню, но если вы включите весь свой CSS и многое другое, нацеленное на идентификатор, который я выложил (а именно icon), он все равно будет скрываться, когда он большой, и отображаться, когда сжался. Вы задавали этот вопрос?
 – 
Nicholas Hazel
21 Янв 2014 в 08:25
Спасибо, да, я хотел бы научиться немного самостоятельно. Благодаря тонну!
 – 
user3172050
21 Янв 2014 в 08:33