Выпадающее меню HTML
- Название Меню - Имя URL Имя URL Название ссылки 1 Название ссылки 2 Название ссылки 3
Такое выпадающее меню очень компактно, экономит место на вашем блоге. В то же время вы можете сделать достаточно большой список ссылок на внутренние страницы вашего блога.
Простое выпадающее меню для blogger можно создать двумя способами.
Первый способ наиболее простой. Вы добавляете код в гаджет HTML/Javascript следующего вида:
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:
<option value="/" >Главная</option>
<option value="ссылка 1" >страница 1</option>
<option value="ссылка 2" >страница 2</option>
</select>
Как изменить этот код так, чтоб линк просматривался не в новом, а в том же окне (same window )?
Для того, чтобы ссылки выпадающего списка открывались в том же окне замените значение '_blank' на '_top'
Здравствуйте ! Как в данном меню поменять фон ссылки при наведении курсора .(тот , который синий )Спасибо !
Как изменить размер меню первого варианта? У меня залезает за границы. Спасибо.
Аноним Шолта, попробуйте задать ширину для 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" />Имя URL
<option value="http://URL1" /> Название страницы 1 <option value="http://URL2" /> Название страницы
<option value="http://URL3" /> Название страницы
</select></form>