Меню навигации с CSS - PullRequest
Новая
       16

Меню навигации с CSS

0 голосов
/ 29 июня 2011

Я пытаюсь сделать простое горизонтальное меню навигации с HTML и CSS2.

Что немного особенного, так это то, что мне нужен красивый фон (изображение), а также левая и правая части меню оформлены фоновым изображением (закругленные углы):

(ссылка 1 | ссылка 2 | ссылка 3)

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

Я экспериментировал с использованием 3 или 4 делителей, где один - контейнер для целого бара, а остальные - левый, центральный и правый делители. Установка фоновых изображений за последние 3 деления: 

div.nav
{
    height:39px;
    line-height:39px;
    padding:0;
    margin:0;
    text-align:center;
    vertical-align:middle;
}

div.navLeft {
    content: 
    background: url('../images/left.png') center left no-repeat;
    float: left;
    width:19px;
}

div.navRight {
    content: 
    background: url('../images/right.png') center right no-repeat;
    float: right;
    width:19px;
}

div.navCenter {
    background-image:url('../images/background.png');
    background-color:transparent;
    background-repeat:repeat-x;
    background-position:center;
    width:100px;
}

И HTML: 

        <div class="nav">
            <div class="navLeft"></div>
            <div class="navCenter">test</div>
            <div class="navRight"></div>
        </div>

Но в браузере это показывает только фоновое изображение navCenter, фоны левого и правого изображений не видны. Я добавил 'content:', как я думал, возможно, DIV нужен какой-то контент, но ничего не улучшилось.

Может быть, это неправильный подход, и я должен использовать теги "ul" и "il" для меню, но тогда я не знаю, куда мне поместить css для каждого соответствующего фонового изображения. Например, могу ли я поместить фоновое изображение слева в css для «ul»? Но что с изображением для правого угла, поскольку ul уже используется? Или я должен использовать «ul: after» для этого?

Ответы [ 3 ]

2 голосов
/ 29 июня 2011

content:&nbsp; - недопустимый CSS, и он вам в любом случае не понадобится. Одной ширины в левом / правом разделителях должно быть достаточно, чтобы задать необходимую ширину, затем добавьте высоту, соответствующую вашей высоте строки центральной части.

Если вам нужно добавить &nbsp, оно должно быть в HTML

также navRight должно быть перед navCenter в HTML для правильной работы поплавков. если div контейнера равен 138px = 100+19+19, то центральный div должен просто заполнить пространство между числами с плавающей запятой, это произойдет, если вы перейдете в новый контекст форматирования блока, - overflow: hidden сделает это ..

CSS: 

div.nav
{
    height:39px;
    width: 138px;
    line-height:39px;
    text-align:center;
}

div.navLeft {
    background: #0f0;
    float: left;
    width:19px;
    height: 39px
}

div.navRight {
    background: #0f0;
    float: right;
    width:19px;
    height: 39px;
}

div.navCenter {
    background: #f00;
    width:100px;
    overflow: hidden; /* to make new black formatting context if width is used */
}

HTML: 

<div class="nav">
  <div class="navLeft"></div>
  <div class="navRight"></div>
  <div class="navCenter">test</div>
</div>

Пример скрипки

1 голос
/ 29 июня 2011

Задайте высоту navLeft и navRight как высоту вашего изображения.Изображение будет отображаться тогда.Попробуй.

0 голосов
/ 01 июля 2011

Нет ничего плохого в том, чтобы использовать div в качестве вкладок меню, хотя использование ul и li обеспечивает удобство и дополнительные возможности при редактировании CSS.

Рассматривали ли вы использование HTML5 для закругленных углов?Вы можете использовать свойство border-radius в контейнере меню: border-radius: 10px;

Вы также должны добавить div с style = "clear: both;"после навигации, чтобы очистить эффекты float: left и float: right.

Вот некоторые javascript-меню, которые вы можете использовать на своем сайте, я думаю, они будут полезны:

MenuBasic Menus

...