X   Сообщение сайта
(Сообщение закроется через 3 секунды)



 

Здравствуйте, гость ( Вход | Регистрация )

Открыть тему
Тема закрыта
> Как сделать прямоугольное меню?
Skovhow
Skovhow
Topic Starter сообщение 1.8.2013, 17:21; Ответить: Skovhow
Сообщение #1


Бывалый
****

Группа: User
Сообщений: 433
Регистрация: 11.1.2010
Поблагодарили: 74 раза
Репутация:   21  


Друзья, подскажите, как мне сделать прямоугольное "толстое" меню, наподобие того, что реализовано на http://photo-monster.ru/

Видите, вверху? "Новичку", "Фотосъёмка", "Обработка фото"... как сделать такое же?


--------------------
Активный доход - разработка сайтов. Пассивный доход - получаю тут
0
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Alexandr163
Alexandr163
сообщение 1.8.2013, 17:44; Ответить: Alexandr163
Сообщение #2


Частый гость
**

Группа: User
Сообщений: 51
Регистрация: 31.7.2013
Из: Самара
Поблагодарили: 5 раз
Репутация:   0  


тебе конкретный код нужен?
_____
html - код
<div id="nav"></div>
_____
css - код

#nav {
width: ширина меню px;
height: высота меню px;
position: absolut;
top: отступ с верху px;
left: отступ с лева px;
}

#nav li {
height: 40px;
float: left;
background-image: url('images/твоя картинка для меню.png');
margin: 0 7px 0 7px;
}

#nav li:hover {
float: left;
background-image: url('images/картинка при наведении-2.png');
}

#nav li a {
position: relative;
top: 7px;
left: 7px;
text-decoration: none;
display: block;
color: #fff;
font: 20px Georgia;
margin-right: 15px;
}

как то так, что не понятно пиши в лс


--------------------
Создание сайтов: самописные + WP обращаться сюда: первый в интернете


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Kursant
Kursant
сообщение 2.8.2013, 19:02; Ответить: Kursant
Сообщение #3


Новичок
*

Группа: Viewer
Сообщений: 5
Регистрация: 31.1.2013
Поблагодарили: 1 раз
Репутация:   2  


Alexandr163,
HTML:
CODE
<ul class="menu">
<li><a href="#">Новичку</a>
<ul>
<li><a href="#">Все основы</a></li>
<li><a href="#">Фотооборудование</a></li>
<li class="current"><a href="#">Симулятор зеркалки</a></li>
</ul>
</li>
<li><a href="#">Фотосъёмка</a>
<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>
</ul>
</li>
<li><a href="#">Обработка фото</a>
<ul>
<li><a href="#">Adobe Camera Raw</a></li>
<li><a href="#">Photoshop и Lightroom</a></li>
</ul>
</li>
<li><a href="#">Видеоуроки</a>
<ul>
<li><a href="#">Adobe Photoshop</a></li>
<li><a href="#">Adobe Lightroom</a></li>
<li><a href="#">Разное</a></li>
</ul>
</li>
</ul>


CSS:
CODE
.menu {
margin: 0;
padding: 0;
list-style: none;
}
.menu > li {
float: left;
width: 182px;
}
.menu > li > a {
display: block;
height: 36px;
font: 17px Arial, Helvetica, sans-serif;
color: #330000;
text-align: center;
text-decoration: none;
line-height: 36px;
background: orange;
}
.menu ul {
margin: 0;
padding: 15px 0;
list-style: none;
min-height: 120px;
padding-top: 15px;
background: #000;
}
.menu ul li {
margin-bottom: 5px;
height: 18px;
}
.menu ul li a {
display: block;
padding-left: 1em;
color: #fff;
font: 12px Arial, Helvetica, sans-serif;
}
.menu ul li a:hover {
text-decoration: none;
}
.menu ul li.current a {
color: #feaf0a;
}

Фон и все остальное доделаете самиsmile.gif


Поблагодарили: (1)
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Skovhow
Skovhow
Topic Starter сообщение 2.8.2013, 19:20; Ответить: Skovhow
Сообщение #4


Бывалый
****

Группа: User
Сообщений: 433
Регистрация: 11.1.2010
Поблагодарили: 74 раза
Репутация:   21  


Kursant, ой, спасибочки большое!))))


--------------------
Активный доход - разработка сайтов. Пассивный доход - получаю тут
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
serg_ivanovich
serg_ivanovich
сообщение 2.8.2013, 20:15; Ответить: serg_ivanovich
Сообщение #5


Новичок
*

Группа: User
Сообщений: 42
Регистрация: 12.3.2013
Поблагодарили: 3 раза
Репутация:   0  


если не розобрались, обратитесь по контактах, помогу настроить... могу сказать что где писать, могу сам написать.... это 2 мин дела
Вернуться в начало страницы
 
Ответить с цитированием данного сообщения
Открыть тему
Тема закрыта
1 чел. читают эту тему (гостей: 1, скрытых пользователей: 0)
Пользователей: 0


Свернуть

> Похожие темы

  Тема Ответов Автор Просмотров Последний ответ
Открытая тема (нет новых ответов) Как мошенники зарабатывают на прямых трансляциях в Instagram
Не ждите порно в инстаграм, его нет
12 PostBrigada 1285 Вчера, 23:00
автор: PostBrigada
Открытая тема (нет новых ответов) Как сейчас зарегистрировать Яндекс кошелек за пределами России?
4 metvekot 326 Вчера, 19:04
автор: metvekot
Открытая тема (нет новых ответов) Как поднять доверие к сайту?
5 fair_exchange 372 Вчера, 18:33
автор: genjnat
Открытая тема (нет новых ответов) Маленький кейс как сделать много почтовых ящиков в Gmail
Один аккаунт = много ящиков
1 PostBrigada 528 15.12.2017, 21:34
автор: Pingunio
Горячая тема (нет новых ответов) Черный список обменников и как безопасно обменять валюту
141 Kurses 29939 15.12.2017, 13:04
автор: BestExchangers


 



RSS Текстовая версия Сейчас: 17.12.2017, 2:45
Дизайн