Перейти к содержимому


Пользователь месяца
TimurR TimurR 1-й за Август
Очков активности: 726 3 темы, 35 сообщений, 11 баллов репутации
ТОП самых активных за этот месяц
  • Фотография ShowPrint
    #1

    ShowPrint (ShowPrint.ru)
    Очков активности: 207 2 темы, 17 сообщений, 6 баллов репутации

  • Фотография Ixman
    #2

    Ixman (o5cat.ru)
    Очков активности: 105 0 тем, 10 сообщений, 7 баллов репутации

  • Фотография WGN
    #3

    WGN (worldgamenews.com)
    Очков активности: 90 Вне конкурса за определение пользователя месяца

  • Фотография magnet
    #4

    magnet (rbfxdirect.com)
    Очков активности: 67.5 Вне конкурса за определение пользователя месяца

  • Фотография BLIK
    #5

    BLIK
    Очков активности: 45 Вне конкурса за определение пользователя месяца

  • Фотография TimurR
    #6

    TimurR
    Очков активности: 42 Вне конкурса за определение пользователя месяца

  • Фотография AnnaYa
    #7

    AnnaYa (topbase.ru)
    Очков активности: 36 2 темы, 6 сообщений, 2 балла репутации

  • Фотография Developer
    #8

    Developer
    Очков активности: 33 2 темы, 16 сообщений, 1 балл репутации

  • Фотография Алексей111
    #9

    Алексей111
    Очков активности: 33 6 тем, 4 сообщения, 1 балл репутации

  • Фотография fedornabilkin
    #10

    fedornabilkin (zaka4ano.ru)
    Очков активности: 24 0 тем, 4 сообщения, 4 балла репутации

  • Показать весь ТОП 10

Kwork.ru - услуги фрилансеров от 500 руб.

Поддержите форум! =)
Апдейты
  • Яндекс тИЦ: 19.11.2017
  • Яндекс выдача: 26.09.2018
Топ 5 участников по репутации


Спрайтовое выпадающее меню ?

#1 Zinder

Zinder
  • Неактивные
  • 8 сообщений
  • Репутация: 0
0

Отправлено 27 August 2009 - 16:48

Столкнулся с проблемой наследования свойств в CSS. Оно мне не к месту, надо бы как-то обойти. В общем вот код:

Описание для всей менюшки:

#globalheader { width: 770px; height: 37px; position: relative; }
#globalheader #globalnav { margin: 0; padding: 0; }
#globalheader #globalnav li { display: inline; }
#globalheader #globalnav li a { float: left; height: 0; padding-top: 34px; overflow: hidden; }
#globalheader #globalnav li a,
#globalheader #globalsearch { background-image: url(../i/menu_sprite.png); _background-image: url(../i/menu_sprite.png); background-repeat: no-repeat; }
Координаты с фоновой картинки выставляем для каждой кнопки меню, как на сайте apple.com:
#globalheader #globalnav li#main a { background-position: 1px -1px; width: 83px}
#globalheader #globalnav li#about a { background-position: -83px -1px; width: 84px}
#globalheader #globalnav li#service a { background-position: -167px -1px; width: 85px}
#globalheader #globalnav li#prod a { background-position: -252px -1px; width: 85px}
#globalheader #globalnav li#solutions a { background-position: -337px -1px; width: 85px}
#globalheader #globalnav li#contact a { background-position: -422px -1px; width: 85px}
#globalheader #globalnav li#partners a { background-position: -507px -1px; width: 89px}
#globalheader #globalnav li#main a:active { background-position: 1px -1px}
#globalheader #globalnav li#about a:active { background-position: -83px -1px}
#globalheader #globalnav li#service a:active { background-position: -167px -1px}
#globalheader #globalnav li#prod a:active { background-position: -252px -1px}
#globalheader #globalnav li#solutions a:active { background-position: -337px -1px}
#globalheader #globalnav li#contact a:active { background-position: -422px -1px}
#globalheader #globalnav li#partners a:active { background-position: -507px -1px}
#globalheader #globalnav li#main a:hover { background-position: 1px -36px}
#globalheader #globalnav li#about a:hover { background-position: -83px -36px}
#globalheader #globalnav li#service a:hover { background-position: -167px -36px}
#globalheader #globalnav li#prod a:hover { background-position: -252px -36px}
#globalheader #globalnav li#solutions a:hover { background-position: -337px -36px}
#globalheader #globalnav li#contact a:hover { background-position: -422px -36px}
#globalheader #globalnav li#partners a:hover { background-position: -507px -36px}



А здесь начинается описание выпадающего списка меню:

#globalheader #globalnav li ul {
display: none;
}
#globalheader #globalnav li:hover ul {
position: absolute;
top: 22px;
left: 14px;
display: block;}
#globalheader #globalnav li#about ul #1 a { background-position: 1px -70px; width: 83px}
#globalheader #globalnav li#about ul #2 a { background-position: 1px -90px; width: 84px}
#globalheader #globalnav li#about ul #3 a { background-position: 1px -110px; width: 85px}
#globalheader #globalnav li#about ul #4 a { background-position: 1px -130px; width: 85px}
#globalheader #globalnav li#about ul #5 a { background-position: 1px -150px; width: 85px}
#globalheader #globalnav li#about ul #6 a { background-position: 1px -170px; width: 85px}


HTML: (каракули-как бе ссылки, копипаст поковеркал русские слова)


<div id="globalheader">


<ul id="globalnav">

<li id="main"><a href="/">Главная</a></li>
<li class="about"><a href="/company">О компании</a>
<ul>
<li id="1"><a href="/company/?id=16">Руководителю</a></li>
<li id="2"><a href="/company/?id=12">Начальнику IT-отдела</a></li>
<li id="3"><a href="/company/?id=2693">Дилерам</a></li>
<li id="4"><a href="/company/?id=214">Наши партнеры</a></li>
<li id="5"><a href="/company/?id=13">Наши клиенты</a></li>
<li id="6"><a href="/archive/?id=1731">Архив мероприятий</a></li>
</ul></li>
<li id="service"><a href="/service">Сервис</a></li>
<li id="prod"><a href="/production">Продукция</a></li>
<li id="solutions"><a href="/solutions">Решения</a></li>
<li id="contact"><a href="/contacts">Контакты</a></li>
<li id="partners"><a href="/partners">Партнерам</a></li>
</ul>


<div id="globalsearch">
<form name="searchform" method="post" action="../search/">
<input type="text" class="cf1" name="search">
<input type="button" value="поиск" onclick="check_form()" id="button">
</form>
</div>




Так вот... надо бы для выпадающего UL выставить координаты для каждой кнопки, точно так же как и для верхних LI (которые постоянно отображаются в линию, как нормальное горизонтальное меню).

А CSS наследует свойства бекграунда из вышестоящих LI и вложенный в LI список со своими LI уже меня не слушается и не хочет применять к себе ни свойства ширины, ни свойства бэк-а. Пробовал применить св-ва ширины к выпадающему UL и к вложенным в него LI, одна фигня - не слушается.

Как же мне сделать красивое меню на основе одной картинки??? Без нее никуда... тут простым заданием цвета фона не обойтись, крысата нужна блин.

 

 

  • 0

#2 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 27 August 2009 - 20:50

Zinder, советую подучить HTML. Аттрибут id не может начинаться с цифры.

А вообще ужас делать подобное... Представляю сколько ваша картинка будет грузиться.
  • 0

#3 Zinder

Zinder
    Topic Starter
  • Неактивные
  • 8 сообщений
  • Репутация: 0

Отправлено 27 August 2009 - 23:29

Всё грузится нормально... в том то и дело, что на все большое меню одна картинка. Координаты высчитать не сложно.
Спасибо большое! Всё дело было в этих гадских id-шках. Поменял на буквы... сейчас красота. :mellow:
  • 0

#4 ZiTosS

ZiTosS
  • Неактивные
  • 5148 сообщений
  • Репутация: 8

Отправлено 29 August 2009 - 22:42

Zinder, Ну в коей-то мере вы и правы, но я бы всё же не стал делать подобных ухищрений и сделал бы один бекграунд со сменой при наведении, и кода бы подобного писать не пришлось.
  • 0


Оформление форума – IPBSkins.ru