Простое вертикальное и горизонтальное меню на CSS.

Здесь разбираются видеокурсы и видеоуроки авторов по созданию простых сайтов с помощью редакторов сайтов типа:сайт визитка или простая продающая страница.

Модератор: Дмитрий

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Вс июл 10, 2011 22:49

Shtefffy писал(а):Здравствуйте! Как сделать вертикальное меню в колонке со вложенными ссылками (наподобие как с папками, чтобы нажимаешь и они "выезжали".


Поищите в сети, тут нужено не только css но и подключение скрипта, сейчас в web 2.0 модно стало использовать JQuery (скрипт подключает библиотеку, берёт и выдаёт результат)

Вопрос: Зачем усложнять меню простого сайта, из-за того, что оно станет красивее и будет выезжать посетителя не на одного не увеличиться.
Если у вас полезная информация то посетитель будет. Вод над чем надо в первую очередь работать.

Подписываемся на сео уроки: http://seonovichok.ru/uroki.html



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение rusl81 » Пт сен 16, 2011 19:06

Вопрос. Мой сайт на юкозе. Я сделал свое меню с помощью картинок созданных в фотошопе, но где-то вычитал, что для поисковиков нужно (хорошо), чтобы оно подсвечивалось и тп. Для этого я подложил под свое меню код того, что Александр написал в начале этой темы. И появились проблемы с этими ссылками-пунктами меню при проверке сайта в pr-cy.ru. Можно ли использовать такое меню, когда при нажатии на пункт не меняется его внешний вид? Мой сайт: http://farvater-tur.ru/



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Пт сен 16, 2011 23:37

rusl81 писал(а):Вопрос. Мой сайт на юкозе. Я сделал свое меню с помощью картинок созданных в фотошопе, но где-то вычитал, что для поисковиков нужно (хорошо), чтобы оно подсвечивалось и тп. Для этого я подложил под свое меню код того, что Александр написал в начале этой темы. И появились проблемы с этими ссылками-пунктами меню при проверке сайта в pr-cy.ru. Можно ли использовать такое меню, когда при нажатии на пункт не меняется его внешний вид? Мой сайт: http://farvater-tur.ru/



Проблем с вашим сайтом не нашёл http://www.pr-cy.ru/link_extractor?url= … ter-tur.ru
Всё у вас работает проблем не нашёл. Доделайте оптимизацию картинок на сайте.



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение rusl81 » Чт сен 22, 2011 08:50

Доброго времени суток.
Мое меню в HTML:
<div id="menu-verticalnoe">
<ul>
<li ><a class="gl" href="http://farvater-tur.ru/" title="фарватер-тур">Главная</a></li>
<li ><a class="ko" href="http://farvater-tur.ru/index/0-2" title="Экскурсии по Курскому краю">Курская область</a></li>
<li ><a href="http://farvater-tur.ru/index/rossija_i_sng_ehkskursii/0-5" title="Экскурсии по РФ и СНГ">РФ и СНГ</a></li>
<li ><a href="http://farvater-tur.ru/index/evropa_ehkskursii/0-6" title="Экскурсии по Европе">Европа</a></li>
<li ><a href="http://farvater-tur.ru/index/tury_po_rossii/0-8" title="Курорты РФ и Украины">РФ и Украина</a></li>
<li ><a href="http://farvater-tur.ru/index/zarubezhnye_strany/0-7" title="Зарубежные курорты">Зарубежные курорты</a></li>
<li ><a href="http://farvater-tur.ru/index/vizy/0-25" title="Виды Виз">Визы</a></li>
<li ><a href="http://farvater-tur.ru/gb" title="Гостевая книга">Гостевая</a></li>
<li ><a href="http://farvater-tur.ru/index/0-3"title="Наши контакты" >Контакты</a></li>
</ul>
</div>

CSS:
#menu-verticalnoe ul {
margin-top:0;
margin: 0;
padding: 0;
list-style: none;
font-family: Helvetica, Arial, Verdana, sans-serif;

}


#menu-verticalnoe li { margin: 1;

}

#menu-verticalnoe a {

display: block;
padding: 1px 1px;
width: 183px;
height:25px;
background-image:url(http://farvater-tur.ru/menushka/osnova_menju.jpg);
text-decoration: none;
color: #000030;
font-size: 14px;
font-weight: bold;
}

#menu-verticalnoe a:hover {

background-image:url(http://farvater-tur.ru/menushka/osnova_menju_2.jpg);
text-decoration: none;
color: #FDFF32;
font-size: 14px;
font-weight: bold;
height:28px;
}
Вопрос: Я сделал в фотошопе свои пункты меню, отдельно для каждого с названиями. Как в css прописать отдельную картинку для каждого пункта. меню?
Вложения
главная.jpg
Такая есть для каждой страницы
главная.jpg (12.48 KiB) Просмотров: 5774



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Чт сен 22, 2011 13:21

Покажу на примере куска кода:
<li ><a class="gl" href="http://farvater-tur.ru/" title="фарватер-тур">Главная</a></li>

Вместо текста слова Главная нам надо вставить вывод картинки в коде:
<img src="Здесь ссылка на картинку" width="200" height="100" border="0">

В итоге получиться так:

<li ><a class="gl" href="http://farvater-tur.ru/" title="фарватер-тур"><img src="http://farvater-tur.ru/menushka/osnova_menju_2.jpg" width="200" height="100" border="0"></a></li>

Разумеется, ссылки на картинки ваши и размеры картинок ставим тоже ваши.
Ссылки можно сделать относительными типа: menushka/osnova_menju_2.jpg вместо http://farvater-tur.ru/menushka/osnova_menju_2.jpg




Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение rusl81 » Чт сен 22, 2011 16:14

Александр писал(а):Покажу на примере куска кода:
<li ><a class="gl" href="http://farvater-tur.ru/" title="фарватер-тур">Главная</a></li>

Вместо текста слова Главная нам надо вставить вывод картинки в коде:
<img src="Здесь ссылка на картинку" width="200" height="100" border="0">

В итоге получиться так:

<li ><a class="gl" href="http://farvater-tur.ru/" title="фарватер-тур"><img src="http://farvater-tur.ru/menushka/osnova_menju_2.jpg" width="200" height="100" border="0"></a></li>

Разумеется, ссылки на картинки ваши и размеры картинок ставим тоже ваши.
Ссылки можно сделать относительными типа: menushka/osnova_menju_2.jpg вместо http://farvater-tur.ru/menushka/osnova_menju_2.jpg



Спасибо.
1. Значение class="gl" (в том числе то, что это картинка) можно прописать в css ?
2. Зачем в коде писать размер?



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение rusl81 » Чт сен 22, 2011 16:51

Еще вопрос по данной теме:
Мой сайт: http://farvater-tur.ru/
Названия в меню находятся вверху, а не посредине картинки. Что добавить в css, чтобы выровнять названия на середину?
CSS:
#menu-verticalnoe ul {
margin-top:0;
margin: 0;
padding: 0;
list-style: none;
font-family: Helvetica, Arial, Verdana, sans-serif;
}
#menu-verticalnoe li { margin: 1;
}
#menu-verticalnoe a {
display: block;
padding: 1px 1px;
width: 183px;
height:28px;
background-image:url(http://farvater-tur.ru/menushka/osnova_menju.jpg);
text-decoration: none;
color: #000030;
font-size: 18px;
font-weight: bold;
}



#menu-verticalnoe a:hover {

background-image:url(http://farvater-tur.ru/menushka/osnova_menju_3.jpg);
text-decoration: none;
color: #000030;
font-size: 14px;
font-weight: bold;
height:28px;
}



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Чт сен 22, 2011 22:27

rusl81 писал(а):1. Значение class="gl" (в том числе то, что это картинка) можно прописать в css ?
2. Зачем в коде писать размер?


class="gl" — можно из меню с картинками выкинуть, т. к. это стили для текста.
Размеры писать нужно, чтобы во всех браузерах отображалось одинаково.
(можете попробовать не писать, различий особых не будет в основных браузерах, а во всяких редких и мобилках косяки будут)

См у вас и так меню по центру, куда его двигать?



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение rusl81 » Пт сен 23, 2011 07:36

Александр писал(а):
rusl81 писал(а):
См у вас и так меню по центру, куда его двигать?


Дело не в самом меню, а в названии пунктов, они "прилипли" к верхнему краю картинок, как их выровнять по вертикали?



rusl81
Бывалый
Бывалый
 
Сообщений: 120
Зарегистрирован: Вт май 03, 2011 11:36
Пункты репутации: 0

Re: Простое вертикальное и горизонтальное меню на CSS.

Сообщение Александр » Пт сен 23, 2011 14:12

rusl81 писал(а):Дело не в самом меню, а в названии пунктов, они "прилипли" к верхнему краю картинок, как их выровнять по вертикали?



Используйте стили img {vertical-align: middle}
Middle — Вертикальная середина изображения выравнивается относительно средней линии текста.
Вот нашёл на быструю руку: http://www.alexilin.ru/aligning-images- … cal-align/



Аватар пользователя
Александр
Администратор
Администратор
 
Сообщений: 897
Зарегистрирован: Вс янв 30, 2011 16:24
Откуда: КРЫМ
Пункты репутации: 151
ПрофессорПрофессор

Пред.След.



Вернуться в Создание простых HTML сайтов и страниц

Кто сейчас на форуме

Сейчас этот форум просматривают: нет зарегистрированных пользователей и гости: 1