Выпадающее меню HTML

- Название Меню - Имя URL Имя URL Название ссылки 1 Название ссылки 2 Название ссылки 3
Такое выпадающее меню очень компактно, экономит место на вашем блоге. В то же время вы можете сделать достаточно большой список ссылок на внутренние страницы вашего блога.
Простое выпадающее меню для blogger можно создать двумя способами.
Первый способ наиболее простой. Вы добавляете код в гаджет HTML/Javascript следующего вида:

<form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
size=1 name=menu>
<option>- Название меню -</option><option value="http://URL">Имя URL</option>
<option value=http://URL1> Название страницы 1</option>
<option value=http://URL2> Название страницы 2option>
<option value=http://URL3> Название страницы 3option>
</select></form>

В коде вам нужно лишь прописать название страниц блога и указать ссылки на соответствующие страницы.
Вы также можете создать выпадающее меню для своего блога, подобрав цвет выпадающего окна и цвет текста под оформление вашего дневника.
меню
Код такого меню будет сложнее, но и в нем не сложно разобраться.
Сначала идем в редактирование шаблона html.
Здесь ищем при помощи поиска (Ctrl + F) </head> и перед ним вставляем следующий код CSS:


<style type="text/css">
.cb_mnu_01{
    width: 200px;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    font-weight: bold;
    font-style: normal;
    text-decoration: none;
    background: #A40000; <!—цвет фона выпадающего меню—>
    color: #000000; <!—цвет ссылок—>
}
</style>
<script language="JavaScript" type="text/JavaScript">
<!--
function HDD_Menu(targetpage,selected){
if (selected.options[selected.selectedIndex].value!=""){  eval(targetpage+".location='"+selected.options[selected.selectedIndex].value+"'");
}}
//-->
</script>

Вы можете поменять цвет фона меню и ссылок. Подобрать нужный цвет вы можете, воспользовавшись программой ColorPic.
Теперь выберите страницы и сообщения, которые будут входить в ваше выпадающее меню, дайте им названия и скопируйте ссылки и вставьте в следующий код html:

<select name="DropMenu1" onChange="HDD_Menu('parent',this)" class="cb_mnu_01">
<option value="/" >Главная</option>
<option value="ссылка 1" >страница 1</option>
<option value="ссылка 2" >страница 2</option>
</select>

5 ответов к «Выпадающее меню HTML»

  1. Аноним Шолта, попробуйте задать ширину для select так:

    <style>
    select {
    width: 600px; /* Ширина списка в пикселах */
    }
    </style>
    <form><select name="menu" onchange="window.open(this.options[this.selectedIndex].value,'_blank')"
    name=menu>
    <option />- Название меню -<option value="http://URL&quot; />Имя URL
    <option value="http://URL1&quot; /> Название страницы 1 <option value="http://URL2&quot; /> Название страницы
    <option value="http://URL3&quot; /> Название страницы
    </select></form>

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *