2011-12-06

Выпадающее меню для blogspot

Такое выпадающее меню очень компактно, экономит место на вашем блоге. В то же время вы можете сделать достаточно большой список ссылок на внутренние страницы вашего блога.
Простое выпадающее меню для 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 комментариев :

Анонимный комментирует...

Как изменить этот код так, чтоб линк просматривался не в новом, а в том же окне (same window )?

Mycrib комментирует...

Для того, чтобы ссылки выпадающего списка открывались в том же окне замените значение '_blank' на '_top'

ccccccc комментирует...

Здравствуйте ! Как в данном меню поменять фон ссылки при наведении курсора .(тот , который синий )Спасибо !

Аноним Шолта комментирует...

Как изменить размер меню первого варианта? У меня залезает за границы. Спасибо.

Иванова Наталья комментирует...

Аноним Шолта, попробуйте задать ширину для 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>

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

Комментарии, содержащие ненормативную лексику, спам, оскорбления, публиковаться не будут. Ели вы хотите опубликовать код в комментарии, то воспользуйтесь encoder HTML
Публикуя комментарии, вы соглашаетесь с политикой конфиденциальности