Как сверстать меню?

341

mark2011

14 мая 2013, 08:56

1559

Есть меню. По наведению мышки текст должен поменяться, а на меню должна быть фоновая картинка. Она одна.

Делаю так:

<div class="menu">

                    <ul>

                        <li><a href="#">главная</a></li>

                        <li><a href="#">о компании</a></li>

                        <li><a href="#">клиенты</a></li>

                        <li><a href="#">оборудование</a></li>

                        <li><a href="#">зона обслуживания</a></li>

                        <li><a href="#">контакты</a></li>

                    </ul>

                </div>


.menu {

    width: 984px;

    height: 45px;

    background-image: url('menu_bg.png');

}



.menu ul {

    list-style-type: none;

    margin-left: 23px;

}



.menu ul li {

    display: inline-block;

    margin-right: 34px;

    text-transform: uppercase;

    font-family: Arial;

    font-size: 12px;

    margin-top: 15px;

   

}



.menu ul li a {

    color: #974a10;

    width: 150px;

}



.menu ul li a:hover {

    color: #fff;

    background-image: url('menu_hover.png');

    width: 128px;

    height: 55px;

    padding-top: 25px;

    padding-bottom: 20px;

    width: 180px;

    padding-right: 10px;

    padding-left: 10px;

}

Но как-то очень неустойчиво и косячно получается.....

есть вариант получше?

------------------- Крутые VPS и дедики. Качество по разумной цене ( http://cp.inferno.name/view.php?product=1212&gid=1 ) VPS25OFF - скидка 25% на первый платеж по ссылке выше

P

54

pornodump

14 мая 2013, 10:04

#1

mark2011:
Есть меню. По наведению мышки текст должен поменяться, а на меню должна быть фоновая картинка. Она одна.

Делаю так:

<div class="menu">

                    <ul>

                        <li><a href="#">главная</a></li>

                        <li><a href="#">о компании</a></li>

                        <li><a href="#">клиенты</a></li>

                        <li><a href="#">оборудование</a></li>

                        <li><a href="#">зона обслуживания</a></li>

                        <li><a href="#">контакты</a></li>

                    </ul>

                </div>


.menu {

    width: 984px;

    height: 45px;

    background-image: url('menu_bg.png');

}



.menu ul {

    list-style-type: none;

    margin-left: 23px;

}



.menu ul li {

    display: inline-block;

    margin-right: 34px;

    text-transform: uppercase;

    font-family: Arial;

    font-size: 12px;

    margin-top: 15px;

   

}



.menu ul li a {

    color: #974a10;

    width: 150px;

}



.menu ul li a:hover {

    color: #fff;

    background-image: url('menu_hover.png');

    width: 128px;

    height: 55px;

    padding-top: 25px;

    padding-bottom: 20px;

    width: 180px;

    padding-right: 10px;

    padding-left: 10px;

}

Но как-то очень неустойчиво и косячно получается.....
есть вариант получше?

Попробуйте добавить line-height: 55px; к .menu ul li и .menu ul li a

AD

6

AwesomeDIMM

14 мая 2013, 10:18

#2

событие hover у вас весит на элементе <a>, повесьте изменение на новую фоновую картинку для элемента ul li

Стильный дизайн для вашего сайта (/ru/forum/789144)

62

Founder

14 мая 2013, 11:05

#3

mark2011:
Есть меню. По наведению мышки текст должен поменяться, а на меню должна быть фоновая картинка. Она одна.

Делаю так:

<div class="menu">

                    <ul>

                        <li><a href="#">главная</a></li>

                        <li><a href="#">о компании</a></li>

                        <li><a href="#">клиенты</a></li>

                        <li><a href="#">оборудование</a></li>

                        <li><a href="#">зона обслуживания</a></li>

                        <li><a href="#">контакты</a></li>

                    </ul>

                </div>


.menu {

    width: 984px;

    height: 45px;

    background-image: url('menu_bg.png');

}



.menu ul {

    list-style-type: none;

    margin-left: 23px;

}



.menu ul li {

    display: inline-block;

    margin-right: 34px;

    text-transform: uppercase;

    font-family: Arial;

    font-size: 12px;

    margin-top: 15px;

   

}



.menu ul li a {

    color: #974a10;

    width: 150px;

}



.menu ul li a:hover {

    color: #fff;

    background-image: url('menu_hover.png');

    width: 128px;

    height: 55px;

    padding-top: 25px;

    padding-bottom: 20px;

    width: 180px;

    padding-right: 10px;

    padding-left: 10px;

}

Но как-то очень неустойчиво и косячно получается.....
есть вариант получше?

попробуйте так

mark2011:

Делаю так:

<div class="menu">

                    <ul>

                        <li><a href="#">главная</a></li>

                        <li><a href="#">о компании</a></li>

                        <li><a href="#">клиенты</a></li>

                        <li><a href="#">оборудование</a></li>

                        <li><a href="#">зона обслуживания</a></li>

                        <li><a href="#">контакты</a></li>

                    </ul>

                </div>


.menu {

    width: 984px;

    height: 45px; // убрать или увеличить

    background-image: url('menu_bg.png');

}



.menu ul {

    list-style-type: none;

    margin-left: 23px;

}



.menu ul li {

    display: inline-block;

    margin-right: 34px;

    text-transform: uppercase;

    font-family: Arial;

    font-size: 12px;

    margin-top: 15px;

   

}



.menu ul li a {

    color: #974a10;

    width: 150px;

}



.menu ul li a:hover {

    color: #fff;

    background-image: url('menu_hover.png');

    width: 128px; // поставте значение 150, почему отличается..

    height: 55px; // поставте значение 45, почему отличается..

    padding-top: 25px;

    padding-bottom: 20px;

    width: 180px; // поставте значение 150, почему отличается..

    padding-right: 10px;

    padding-left: 10px;

}



проверьте какие размеры вы задаете слоям и какие потом пытаетесь в них вложить..

M2

341

mark2011

14 мая 2013, 11:26

#4

Founder,

Так как вы пишете в принципе нормально. Косяк возникает при наведении мышкой на пункт меню :(

AD

6

AwesomeDIMM

14 мая 2013, 15:43

#5

я ж написал - меняйте фон когда навдение происходит не на <A>, а на UL-LI, и будет вам счастье

P

54

pornodump

14 мая 2013, 18:15

#6

AwesomeDIMM:
я ж написал - меняйте фон когда навдение происходит не на <A>, а на UL-LI, и будет вам счастье

Я еще выше подсказал, что надо сделать line-height: 55px;, так как у него например текст 14px, а картинка при наведении высотой 55px, получается происходит увеличение, отсюда и корявится все. А когда вы сделаете line-height: 55px, то все должно быть норм, так как вся ширина блока (как с текстом так и с картинкой) будет 55px, тогда и не будет корявится у вас ничего.

Размещение картинки Поставить фото галерею на Как выровнять текст в

M2

341

mark2011

17 мая 2013, 11:14

#7

В общем смотрел дела с меню, отвечаю по порядку:

1. Когда меняю фон с A на UL-LI - совсем беда получается.

2. Текущий код привожу здесь:

CSS:


.menu {
    width: 984px;
    height: 65px;
    background-image: url('menu_bg.png');
}

.menu ul {
    list-style-type: none;
    width: 700px;
    margin: 0 auto;
}

.menu ul li { 
    float: left;
    margin-right: 54px;
    text-transform: uppercase;
    font-family: Arial;
    font-size: 12px;
    margin-top: 15px;
    padding-left: 2px;
    padding-right: 2px;
    display: inline-block;

}

.menu ul li a {
    color: #974a10;
    position: relative;
    z-index: 100;

}

.menu ul li a:hover {
    color: #fff;
    background-image: url('menu_hover.png');
    height: 45px; 
    padding:20px 0px 15px 0px;
    width: 130px;
    position: relative;
    z-index: 200;
}

HTML:


 <div class="menu">
                    <ul>
                        <li><a href="/">главная</a></li>
                        <li><a href="/about/">о компании</a></li>
                        <li><a href="/clients/">клиенты</a></li>
                        <li><a href="/service_zone/">зона обслуживания</a></li>
                        <li><a href="/contacts/">контакты</a></li>
                    </ul>
</div>

Что не нравится в данном коде:

1. Надо бы, чтобы картинка выступала за края слов меню где-то пиксела на 3-4. Но за счёт этих лишних пикселов слова, отстоящие от заданного слова справа, сдвигаются вправо на то же самое кол-во пикселов.

2. Фоновая картинка не покрывает полностью слова "Зона самообслуживания". Зона над которой проходит картинка - до буквы "Н" и после буквы "И" в слове "самообслуживания". Как-то странно выпадает из общего поля половина буквы "Н" и полностью буква "И".

Буду благодарен за любую помощь в решении данного вопроса.

Сделал редизайн главной страницы пустая <a href не Оцените, пожалуйста, дизайн

M2

341

mark2011

21 мая 2013, 05:17

#8

Очередной раз апаю тему :)

Вот сайт-пациент.

Кому не влом, гляньте на верхнее меню, что там можно сделать? Я замаялся уже, если честно...

C

291

Chukcha

21 мая 2013, 07:30

#9

.menu ul li a {

color: #974a10;

position: relative;

z-index: 100;

}

.menu ul li a:hover {

color: #fff;

background-image: url('menu_hover.png');

height: 45px;

padding:20px 0px 15px 0px;

width: 130px;

position: relative;

z-index: 200;

}

общие свойства нужно вынести к родителю (основному селектору)

.menu ul li a {

color: #974a10;

position: relative;

z-index: 100;

height: 45px;

padding:20px 0px 15px 0px;

width: 130px;

position: relative;

}

Помогите с вёрсткой менюшки Меню на OpenCart Оптимизация сайта для планшетов

119

vlad00777

21 мая 2013, 08:38

#10

AwesomeDIMM, правильно подсказал. Тс что вам еще надо?

.menu ul li:hover{стили}

Верстка. Качественно! Адаптивная, резиновая, с параллаксом и прочими плюшками. В ЛС.

Яндекс Вебмастер вынес товарные фиды в отдельный раздел

Тренды маркетинга в 2024 году: мобильные продажи, углубленная аналитика и ИИ