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

Вертикальное меню для блога 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:20px; border: 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>.

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

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