К основному контенту

Добавляем выпадающее меня в блог на блогспот

image Многие из блоггеров используют простые шаблоны, это облегчает восприятие блога у читателей, однако со временем когда объем информации возростает появляется необходимость внедрения дополнительной навигации. В этом нам поможет легко настраиваемое выпадающее меню для блога на блогспот.
Ранее я уже писал как добавить меню в блог, однако оно не включало в себя выпадающие элементы. Сегодня же расскажу как заполучить полноценное меню.
Итак для начала сохраните свой шаблон, чтобы если, что Вы всегда могли вернуть свои прежние настройки.
Далее действуйте по пунктам:

1. Добавляем CSS


Зайдите в настройки блога в раздел Шаблон/Изменить HTML и найдите следующий тэг:
]]></b:skin>





И перед ним вставьте следующий CSS код:





#jsddm {
margin: 0;
padding: 15px;
z-index:1000000000;
position:relative;
}

#jsddm li {
float: left;
list-style: none;
font: 12px Tahoma, Arial;
}

#jsddm li a {
display: block;
white-space: nowrap;
margin:1px 3px;
border: 1px solid #AAAAAA;
background: #cccccc;
background: -webkit-gradient(linear, left top, left bottom, from(#ebebeb), to(#cccccc));
background: -moz-linear-gradient(top, #ebebeb, #cccccc);
padding: 5px 10px;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
text-shadow: #ffffff 0 1px 0;
color: #363636;
font-size: 15px;
font-family: Helvetica, Arial, Sans-Serif;
text-decoration: none;
vertical-align: middle;
}

#jsddm li a:hover {
background: #C8C8C8;
}

#jsddm li ul {
margin: 0;
padding: 0;
position: absolute;
visibility: hidden;
border-top: 1px solid white;
}

#jsddm li ul li {
float: none;
display: inline;
}

#jsddm li ul li a {
width: auto;
background: #CAE8FA;
}

#jsddm li ul li a:hover {
background: #A3CEE5;
}





2. Дoбавляем Java Script



Найдите следующий тэг:


</head>





И сразу перед ним вставьте следующий скрипт:





<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js' type='text/javascript'/>
<script type='text/javascript'>
//<![CDATA[

var timeout    = 500;
var closetimer = 0;
var ddmenuitem = 0;

function jsddm_open()
{  jsddm_canceltimer();
jsddm_close();
ddmenuitem = $(this).find('ul').css('visibility', 'visible');}

function jsddm_close()
{  if(ddmenuitem) ddmenuitem.css('visibility', 'hidden');}

function jsddm_timer()
{  closetimer = window.setTimeout(jsddm_close, timeout);}

function jsddm_canceltimer()
{  if(closetimer)
{  window.clearTimeout(closetimer);
closetimer = null;}}

$(document).ready(function()
{  $('#jsddm > li').bind('mouseover', jsddm_open)
$('#jsddm > li').bind('mouseout',  jsddm_timer)});

document.onclick = jsddm_close;
//]]>
</script>





3. Добавляем меню в блог.



Зайдите в Дизайн блога и нажмите добавить гаджет в удобном для Вас месте, выберите HTML/Java Script и вставьте следующий скрипт:


<ul id="jsddm">
<li><a href="#">Home</a>
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Drop 1-1</a></li>
<li><a href="#">Drop 1-2</a></li>
<li><a href="#">Drop 1-3</a></li>
</ul>
</li>

<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Drop 2-1</a></li>
<li><a href="#">Drop 2-2</a></li>
</ul>
</li>

<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Drop 3-1</a></li>
<li><a href="#">Drop 3-2</a></li>
<li><a href="#">Drop 3-3</a></li>
<li><a href="#">Drop 3-4</a></li>
</ul>
</li>

<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>
<li><a href="#">AllBlogTools</a></li>
</li></ul>





В этом коде добавляйте  название Ваших пунктов меню, а вместо # вставляйте ссылки на необходимые страницы.


Вот так за три несложных шага Вы можете добавить себе в блог красивое выпадающее меню.

Комментарии

  1. А почему оно горизонтальное и в список никак не трансформируется? Хотя в теги списка заключено. Не поможете?

    ОтветитьУдалить
  2. Ну потому что это такой тип меню. Если хотите горизонтальное, то почитайте вот этот пост:
    http://bloggfast.blogspot.com/2011/05/blog-post_1917.html

    Если я правильно понял вопрос!

    ОтветитьУдалить
  3. вопрос: как сделать чтобы пункты под меню были поверх изображений блога а не скрывались за ними ?
    www.online-moldova.blogspot.com

    ОтветитьУдалить
  4. http://homelessinussr.blogspot.ru/

    ОтветитьУдалить

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

Популярные сообщения из этого блога

Добавляем красивый гаджет Поделиться

Если Вы регулярно совершенствуете свой блог, то Вам пригодится данная не сложная публикация, о том как добавить красивую кнопку "Поделиться". Ее особенность в том, что при наведение курсора она раскрывается и предлагает несколько сервисов в которых можно разместить ссылку на Ваш блог. Демо можно посмотреть тут!

Как сделать ссылку на определенную часть той же страницы.

Все блоггеры пользуются ссылками практически в каждой статье, помимо удобства это еще и очень полезно для индексации блога. Сегодня хотел бы описать как сделать ссылку на туже страницу на которой находится Ваш читатель, только ниже, либо Выше, допустим Ваша статья состоит из нескольких частей и читатель, хочет пропустить первую и перейти сразу ко второй. Сделать это достаточно просто! 1.Для начала нам необходимо присвоить определенной части текста “Якорь”, допустим Вы хотите ссылать на каую-либо часть статьи, перед началом необходимого участка текста вставьте в HTML коде статьи следующий тег : <a id=" yakor "></a> Начало текста или заголовка В качестве слова якорь выделенного красным вы можете использовать любое другое, подходящее по смыслу. 2. Теперь необходимо сделать ссылку на данный якорь. А именно в HTML коде страницы перед словом которое должно быть ссылкой ставим тэг вида: <a href="# yakor ">Слово</a> Покажу как это долж

Открыть несколько ссылок одним кликом мыши

Многие из Вас наверняка встречали сайты, на которых нажав на одну ссылку открывается сразу несколько сайтов. Так делают те кто хочет прорекламировать независимый интернет ресурс, в таком случае открывается ссылка по которой вы должны перейти и еще одна, так-же это делают для увеличения просмотров определенных страниц на сайте, либо если действительно необходимо открыть сразу две ссылки. Для обычного блоггера это может быть полезным так как заинтересовав человека одной ссылкой Вы как бы повышаете популярность Вашего ресурса, так как он посетит вместо одной страницы в Вашем блоге сразу несколько. Чтобы вставить такую ссылку необходимо к тексту добавить следующий код: <a href="http://www.ссылка1.com/" target="_blank" onmouseover="window.open(&quot;&quot;http://www.ссылка2.com&quot;&quot;);window.open(&quot;&quot;http://www.ссылка3.com&quot;&quot;);">Click Here Link Bucket</a>   Вставьте свои ссылки, увеличьт