FAQ Делаем красивое меню в шапке

Пользователь · Регистрация: 12.09.2010

Всем привет..
Переходим сразу к делу..
Делаем это меню

Заходим в http://ваш сайт.ру/admincp/index.php Управление стилями - Ваш стиль - header
В самый верх добавляем

PHP код:



<ul class="glossymenu"> 
<li class="current"><a href="#"><b>Главная</b></a></li> 
<li><a href="#"><b>PCvector.ru</b></a></li> 
<li><a href="#"><b>PCvector.ru</b></a></li> 
<li><a href="#"><b>PCvector.ru</b></a></li> 
<li><a href="#"><b>PCvector.ru</b></a></li> 
</ul>

Далее идем в Управление стилями - Ваш стиль - Основная таблица css
Находим там окошко Дополнительные определения CSS и во второе окошко добавляем в самый низ

.glossymenu{

position: relative;

padding: 0 0 0 490px;

margin: 0 auto 0 auto;

background: url(images/menu_bg.gif) repeat-x; /*путь к картинке заднего фона*/

height: 46px;

list-style: none;

}



.glossymenu li{

float:left;

}



.glossymenu li a{

float: left;

display: block;

color:#000;

text-decoration: none;

font-family: sans-serif;

font-size: 13px;

font-weight: bold;

padding:0 0 0 19px; /*Padding to accomodate left tab image. Do not change*/

height: 46px;

line-height: 46px;

text-align: center;

cursor: pointer; 

}



.glossymenu li a b{

float: left;

display: block;

padding: 0 24px 0 3px; /*Расстояние между элементами меню*/

}



.glossymenu li.current a, .glossymenu li a:hover{

color: #fff;

background: url(images/menu_hover_left.gif) no-repeat; /*путь к левой картинке*/

background-position: left;

}



.glossymenu li.current a b, .glossymenu li a:hover b{

color: #fff;

background: url(images/menu_hover_right.gif) no-repeat right top; /*путь к правой картинке*/

}

Основная часть сделана!Осталось совсем немножко..
Заливаем эти картинки к себе на хостинг в папку images

menu_bg.gif

menu_hover_left.gif

menu_hover_right.gif
Ну вот и все..Вы можете изменять все что написано в статье под себя.
С вами был ololo
Статья была написана специально для PCvector ,по материалам взятых с ruseller.com

Пользователь · 04.04.2011, 18:09

Мжет кто подскажет, как правильно перевернуть, я перевернул, но у меня полоска появилась, и ни как не могу её убрать

Пользователь · 04.04.2011, 19:55

Цитата:

Сообщение от melaf

Мжет кто подскажет, как правильно перевернуть, я перевернул, но у меня полоска появилась, и ни как не могу её убрать

блин..вроде все по русскому а я ни чего не понял..подробнее что перевернуть?картинку?

---------------------------------------
дошло про что ты говоришь...

перевернутая картинкоо

Пользователь · 04.04.2011, 20:03

да, установить под шапку, и перевернуть на 180 градусов все картинки, я перевернул, название их поменял местами, закинул на форум, но видишь, появилась лишняя полоска, вот и не как не могу от нее избавиться

Администратор · 04.04.2011, 20:04

Пользователь · 04.04.2011, 20:09

да я сам все перевернул, у меня проблема в том. что полоска лишняя появилась, а я незнаю, в каком месте что изменить, чтобы она убралась
на скриншоте я стрелкой показал эту полоску

Пользователь · 02.12.2011, 00:36

а у меня вопще все по вертикали стоит а не по горизонты.. и катринки не грузит.. пути я указал правильно...

[IMG]

[/IMG]

что нужно поменять в парамтрах сто по горизонту все шло???

Модератор · Регистрация: 22.04.2011

Wor, в Дополнительное Определение CSS во 2 окно ( вниз ) добавили нужный код?

.glossymenu{
position: relative;
padding: 0 0 0 490px;
margin: 0 auto 0 auto;
background: url(images/menu_bg.gif) repeat-x; /*путь к картинке заднего фона*/
height: 46px;
list-style: none;
}

.glossymenu li{
float:left;
}

.glossymenu li a{
float: left;
display: block;
color:#000;
text-decoration: none;
font-family: sans-serif;
font-size: 13px;
font-weight: bold;
padding:0 0 0 19px; /*Padding to accomodate left tab image. Do not change*/
height: 46px;
line-height: 46px;
text-align: center;
cursor: pointer; 
}

.glossymenu li a b{
float: left;
display: block;
padding: 0 24px 0 3px; /*Расстояние между элементами меню*/
}

.glossymenu li.current a, .glossymenu li a:hover{
color: #fff;
background: url(images/menu_hover_left.gif) no-repeat; /*путь к левой картинке*/
background-position: left;
}

.glossymenu li.current a b, .glossymenu li a:hover b{
color: #fff;
background: url(images/menu_hover_right.gif) no-repeat right top; /*путь к правой картинке*/
}

Пользователь · Регистрация: 10.02.2011

а как сделать, чтобы это меню было строго посередине экрана, а то у меня оно гдето сбоку, а на широкоформатных экранах, посередине

Пользователь · Регистрация: 10.02.2011

ни кто не знает чтоли?

Опции темы
Версия для печати Отправить по электронной почте
Опции просмотра
Линейный вид Комбинированный вид Древовидный вид

Сириус #2
210 МГц Пользователь Вес репутации: 0 Регистрация: 10.02.2011 Сообщений: 256 Сказал(а) спасибо: 151 Спасибок 64 в 41 сообщениях	04.04.2011, 18:09 Мжет кто подскажет, как правильно перевернуть, я перевернул, но у меня полоска появилась, и ни как не могу её убрать

Vector #5
7560 МГц Администратор Вес репутации: 0 Регистрация: 27.02.2009 Адрес: Москва Сообщений: 7,247 Сказал(а) спасибо: 574 Спасибок 2,673 в 1,898 сообщениях	04.04.2011, 20:04

Сириус #10
210 МГц Пользователь Вес репутации: 0 Регистрация: 10.02.2011 Сообщений: 256 Сказал(а) спасибо: 151 Спасибок 64 в 41 сообщениях	Re: Делаем красивое меню в шапке - 03.01.2012, 06:54 ни кто не знает чтоли?