Как сделать вертикальное меню с бегущими ссылками



Вертикальное меню для блога Blogspot с бегущими ссылками

Здравствуйте дорогие посетители. Сегодня мы научимся делать вертикальное меню для наших блогов с бегущими ссылками.

Кому нравится в дизайне своих блогов движущееся и бегающее, тогда это информация для Вас. Не могу не согласиться, что наличие в своем блоге такого вертикального меню сразу обращает внимание посетителей. Вы можете использовать ссылки также и для какой то конкретной, важной информации. Итак поехали:

Возьмем код бегущей строки снизу-вверх

<marquee behavior="scroll" direction="up" scrollAmount="1" width="" height=""></marquee> 


Мы знаем, что ссылка в меню на любую страницу выглядит так

<li><a href="адрес ссылки">название ссылки</a></li>

Добавим к примеру 3 адреса и название ссылки в код бегущей строки


<marquee behavior="scroll" direction="up" scrollamount="1"width="220" height="130">
<ul type="menu">
<li><a href="адрес ссылки">название ссылки</a></li>
<li><a href="адрес ссылки">название ссылки<a></li>
<li><a href="адрес ссылки">название ссылки</a></li>
</ul></marquee>

Чтобы приукрасить наше меню, добавим цвет фона меню, цвет, форму и размер границы рамки


<marquee behavior="scroll" direction="up" scrollamount="1"bgcolor="#00FF33" style="border-radius:20pxborder: 7px #00868b ridge;" width="220" height="130">
<ul type="menu">
<li><a href="адрес ссылки">название ссылки</a></li>
<li><a href="адрес ссылки">название ссылки<a></li>
<li><a href="адрес ссылки">название ссылки</a></li>
</ul></marquee>


Получим вот такое симпатичное вертикальное меню



Используя границы снизу (border-bottom) и справа (border-right) можно получить такое меню 


Код меню вставляете в черновике blogger-дизайн-добавить гаджет

Настройки:  выделенное синим-скорость ссылок; лиловым-цвет фона; красным-радиус закругления углов; оранжевым-размер, цвет и форма границ рамки; фиолетовым-ширина и высота меню.

Отображение меню в разных браузерах и шаблонах различно. У меня в одном из шаблонов меню отображается без маркеров. Если необходимо выровнять текст ссылок по центру, перед <ul пишем <center>, после </ul> пишем </center>

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

На сегодня у меня все. Комментируйте, делитесь с друзьями, а я говорю Вам Всего доброго.


Автор статьи ✎ Olga Protasova Выпуск ✹ 6/18/2014 Ярлыки ►


Открыть комментарии →

0 коммент. :

Отправить комментарий


 
Технологии Blogger.

Форма для связи

Имя

Электронная почта *

Сообщение *