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

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

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

Сделать меню данного типа не сложно. просто следуйте шагам перечисленным ниже.
1. Зайдите в настройки блога, в раздел “Дизайн”, затем в необходимом месте нажмите добавить гаджет, и выберите HTML/Java Script.
2. В поле гаджета вставьте следующий скрипт:


<script src='http://mybloggertricks.googlecode.com/files/dropdownddlevel.js' type='text/javascript'></script>
<style>
/* ######### Drop Down Menu by www.MyBloggerTricks.com ######### */
.ddsubmenustyle, .ddsubmenustyle div{ /*topmost and sub DIVs, respectively*/
font: normal 13px Verdana;
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
background: white;
border: 1px solid black;
border-bottom-width: 0;
visibility: hidden;
z-index: 100;
}
.ddsubmenustyle ul{
margin: 0;
padding: 0;
position: absolute;
left: 0;
top: 0;
list-style-type: none;
border: 0px none;
}
.ddsubmenustyle li a{
display: block;
width: 170px; /*width of menu (not including side paddings)*/
color: black;
background-color: lightyellow;
text-decoration: none;
padding: 4px 5px;
border-bottom: 1px solid black;
}
* html .ddsubmenustyle li{ /*IE6 CSS hack*/
display: inline-block;
width: 170px; /*width of menu (include side paddings of LI A*/
}
.ddsubmenustyle li a:hover{
background-color: black;
color: white;
}
.downarrowpointer{ /*CSS for "down" arrow image added to top menu items*/
padding-left: 4px;
border: 0;
}
.rightarrowpointer{ /*CSS for "right" arrow image added to drop down menu items*/
position: absolute;
padding-top: 3px;
left: 100px;
border: 0;
}
.ddiframeshim{
position: absolute;
z-index: 500;
background: transparent;
border-width: 0;
width: 0;
height: 0;
display: block;
}
/* ######### Black Strip Main Menu Bar CSS ######### */
.mattblackmenu ul{
margin: 0;
padding: 0;
font: bold 12px Verdana;
list-style-type: none;
border-bottom: 1px solid gray;
background: #414141; overflow: hidden;
width: 100%;
}
.mattblackmenu li{
display: inline;
margin: 0;
}
.mattblackmenu li a{
float: left;
display: block;
text-decoration: none;
margin: 0;
padding: 6px 8px; /*padding inside each tab*/
border-right: 1px solid white; /*right divider between tabs*/
color: white;
background: #414141;
}
.mattblackmenu li a:visited{
color: white;
}
.mattblackmenu li a:hover{
background: black; /*background of tabs for hover state */
}
.mattblackmenu a.selected{
background: black; /*background of tab with "selected" class assigned to its LI */
}
</style>
<div id="ddtopmenubar" class="mattblackmenu">
<ul>
<li><a href="#">LINK1</a></li>
<li><a href="#" rel="ddsubmenu1">LINK2</a></li>
<li><a href="#" rel="ddsubmenu2">LINK3</a></li>
<li><a href="#">Link4</a></li>
<li><a href="#" rel="ddsubmenu3">LINK5</a></li>
</ul>
</div>
<script type="text/javascript">
ddlevelsmenu.setup("ddtopmenubar", "topbar") //ddlevelsmenu.setup("mainmenuid", "topbar|sidebar")
</script>
<ul class='ddsubmenustyle' id='ddsubmenu1'>
<li><a href='#'>LINK2 ITEM 1</a></li>
<li><a href='#'>LINK2 ITEM 2</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 2.1</a></li>
  <li><a href='#'>LINK2 ITEM 2.2</a></li>
  </ul>
</li>
<li><a href='#'>LINK2 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK2 ITEM 3.1</a></li>
    </ul>
</li>
<li><a href='#'>LINK2 ITEM 4</a></li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu2'>
<li><a href='#'>LINK3 ITEM 1</a></li>
<li><a href='#'>LINK3 ITEM 2</a></li>
<li><a href='#'>LINK3 ITEM 3</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 3.1</a></li>
<li><a href='#'>LINK3 ITEM 3.2</a></li>
  <li><a href='#'>LINK3 ITEM 3.3</a></li>
  <li><a href='#'>LINK3 ITEM 3.4</a></li>
  </ul>
</li>
<li><a href='#'>LINK3 ITEM 4</a></li>
<li><a href='#'>LINK3 ITEM 5</a>
  <ul>
  <li><a href='#'>LINK3 ITEM 5.1</a></li>
  <li><a href='#'>LINK3 ITEM 5.2</a>
    <ul>
    <li><a href='#'>LINK3 ITEM 5.2 1</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 2</a></li>
    <li><a href='#'>LINK3 ITEM 5.2 3</a></li>
    </ul>
  </li>
    </ul>
</li>
<li><a href='#'>LINK3 ITEM 6</a></li>
</ul>
<ul class='ddsubmenustyle' id='ddsubmenu3'>
<li><a href='#'>LINK5 ITEM 1</a></li>
<li><a href='#'>LINK5 ITEM 2</a></li>
<li><a href='#'>LINK5 ITEM 3</a></li>
<li><a href='#'>LINK5 ITEM 4</a></li>
<li><a href='#'>LINK5 ITEM 5</a></li>
</ul>

3. В данном меню просто измените выделенный жирным текст названием меню или подменю, а вместо # вставьте ссылку на нужную страницу.
4. Часть кода выделенная зеленым отвечает за цвет фона, измените его используя шестизначный код цвета. Как менять цвета читайте здесь.
5. Чтобы добавить в основном меню выпадающее просто добавьте как в коде вот такую строчку rel="ddsubmenu1 и измените номер соответственно количеству выпадающих меню.
Если возникнуть какие либо вопросы пишите в комментариях.

Комментарии

  1. Здравствуйте! Подскажите, пожалуйста, как правильно задавать адрес вместо #, ведь этой страницы пока нет.

    Спасибо большое за статью, у меня сразу же получилось поставить меню (ура, ура!))), но с адресом заминка вышла.
    Я так понимаю, нужно ставить адрес блога.com/название страницы, а вот что в конце?
    Я уже и просто / пробовала, и .html - все равно в итоге пишет - такой страницы не существует.

    ОтветитьУдалить
  2. открываете в отдельном окне страницу на которую хотите сделать ссылку:
    копируете адрес вот так: http://bloggfast.blogspot.com/2012/03/blog-post.html

    после вставляете вместо '#' но кавычки должны быть без них работать не будет

    ОтветитьУдалить
  3. Если у Вы хотите оставить раздел меню пока без ссылки то оставляйте # и при нажатии на данный раздел меню просто ничего не будет происходить!

    ОтветитьУдалить
  4. Спасибо, все получилось))) У меня еще вопрос - теперь, когда я буду писать новый текст, то не получится в черновике отмечать раздел, куда его хочу добавить? Каждую страницу надо через HTML забивать?

    ОтветитьУдалить
  5. Не совсем понял вопрос.

    Вы можете присвоить пункту меню и раздел, а не отдельную страницу со статьей - просто откройте раздел скопируйте его адрес и вставьте вместо # .

    ОтветитьУдалить
  6. Все работает отлично во всех браузерах. В Internet Explorer отображается не корректно. Как исправить?

    ОтветитьУдалить
  7. А можно архив туда засунуть?? и как???

    ОтветитьУдалить
  8. Очень вам благодарна. Все получилось!!!! Я уже отчаялась после всяких попыток..:) спасибо

    ОтветитьУдалить
  9. Прошу помощи.
    Не выпадает подменю.
    Сделал все как в вашем скрипте.
    Появляется только заглавное меню LINK1; 2; 3; 4

    ОтветитьУдалить
  10. и что за ссылки по скрипту?

    ОтветитьУдалить
  11. помогити плиз как мне сделать подменю у меня саит про кулинарию я хочу в главном меню сделать раздел рецепты и чтобы выподало там 2блюда ,супы ,салаты и так далие

    ОтветитьУдалить
  12. что именно не получается? данное меню пробовали поставить?

    ОтветитьУдалить
  13. как вам необходимо.

    ОтветитьУдалить
  14. Как поменять цвет шрифта с белого на черный

    ОтветитьУдалить
  15. А у меня не получается сделать так, чтобы из главных иконок что-то выезжало.. уже все перепробовала
    И цвет фона (черный) тоже хотелось бы изменить
    Помогите, пожалуйста.
    Заранее спасибо
    guziylivejournal.blogspot.com

    ОтветитьУдалить
  16. Доброго времени суток! У меня проблема с выплывающим меню (меню второго и третьего уровня). Меню первого уровня вставил без проблем. А вот когда вставил меню 2 и 3 уровня, то результатов не увидел - не выплывает и не обнаруживается. Я подозреваю, что это связано со строчкой rel="ddsubmenu1 Можно поподробнее об этом ?

    ОтветитьУдалить
  17. да там скорее всего просто ошибка в коед у вас, надо смотреть так не скажу.

    ОтветитьУдалить
  18. у меня почему-то оно встает в боковую панель... не сверху вроде все правильно сделал

    ОтветитьУдалить
  19. Здравствуйте,
    1. у меня тоже почему-то не выезжают подменюшки.
    2. и не меняется шрифт свой цвет при наведении на них мышкой.

    Как это сделать, чтобы Вы может посмотрели, у меня уже глаза на лоб лезут - не вижу.

    Благодарю за вашу рекомендацию- для меня она она оказалась самой действенной и понятной :)

    ОтветитьУдалить
  20. Сделал всё по инструкции сверху названия есть а при нажатии никакой реакции(ничего не выпадает) подскажите в чем может быть проблема?

    ОтветитьУдалить
  21. При наведении на меню под менюшка не выпадает, где то ошибка у Вас в коде, прошу исправить. Спасибо.

    ОтветитьУдалить
  22. Сделал меню. Как публиковать сообщения/статьи в конкретном разделе меню?????

    ОтветитьУдалить
  23. Этот комментарий был удален автором.

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

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

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

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

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

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

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