Как оформить горизонтальное меню с изображениями сверху и по центру текста? - PullRequest
Новая
       46

Как оформить горизонтальное меню с изображениями сверху и по центру текста?

0 голосов
/ 27 декабря 2011

Принимая во внимание следующее изображение, представляющее 3 состояния этого взаимодействия меню:

horizontal menu with 3 states

И зная, что:

1) Мы не можем иметь одно изображение для всего горизонтального меню, каждый элемент (так, каждый ul li a) должен иметь свое собственное изображение;

2) Позиционирование фонового изображения будет предпочтительным, так как оно будет лучше в отношении кросс-браузерных проблем;

3) Текст на этих кнопках (должен быть) текст, а не изображение;

Каков наилучший способ достижения этого? Мне просто нужно отсидеться здесь.

Спасибо.

Обновление:

Вот тест без обмена изображениями: http://jsfiddle.net/Cq5JY/

1 Ответ

1 голос
/ 27 декабря 2011

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

Каждому элементу в навигации требуется 1 изображение с тремя состояниями для состояния переключения и активного состояния.Затем вы бы переместили фоновое изображение, используя CSS, как вы упомянули, в зависимости от того, как вы разметили изображения.

То, что делает CSS немного сложным (ну, вы будете писать немалое количество), это текстпозиционирование на кнопках, если текст начинается с множества разных y-координат, то, очевидно, вы будете записывать каждую из них в CSS.

Я бы настроил навигацию, используя код, подобный приведенному ниже (не проверено)основанный на отдельном изображении для каждой кнопки, которое имеет в нем обычное состояние кнопки, под ролловером и под ним, активное состояние кнопки. 

/* set up the button based on a width of 150px and 100px height */
ul li, ul li a{

    display:block;
    width:150px;
    height:100px;
    text-align:center;
    background-position:0 0;
}

ul li{

    float:left;
}

/* roll over - move the background image by the height of the button (100px) */
ul li a:hover{ background-position:0 -100px; }

/* active state - move the background image by twice height of the button (200px) */
ul li a.active, ul li a.active:hover{ background-position:0 -200px; }

/* define each button (background image and text position) */
ul li a.dashboard
{
    background-image:url(images/dashboard.png); /* define image url */
    padding-top:40px; /* position the text using a combination of padding / height) */
    height: 60px;

}
ul li a.products
{
    background-image:url(images/products.png); /* define image url */
    padding-top:30px; /* position the text using a combination of padding / height) */
    height: 70px;

}
...

И тогда у меня будет HTMLдовольно просто: 

<ul>
    <li><a href="dashboard.html" class="dashboard active">Dashboard</a></li>
    <li><a href="products.html" class="products">Products &amp; Services</a></li>
    ...
</ul>

Дайте мне знать, если у вас есть какие-либо вопросы, я на самом деле не тестировал код, но это мой общий подход к большинству навигации по html / css, будь то вертикальная или горизонтальная (хотяЯ бы использовал 1 большое изображение для всех состояний прокрутки для всех кнопок).

...