Приветствую Вас Гость | Мой профильРегистрацияВход

Заработок на САР









Главная » Статьи » Мои статьи

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

 

 

 

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

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>





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

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

Категория: Мои статьи | Добавил: bonsai (23.05.2013)
Просмотров: 4661 | Комментарии: 5 | Рейтинг: 5.0/3
Всего комментариев: 5
5  
Здравствуйте. Пишет Вам учитель, который создал свойблог, но при создании выпадающего меню за предложенным выше вариантом
столкнулся с проблемой.На главной страницеблога все меню видно в полном объеме.
Далее создала
страницу и из информационной панели страницы скопировала адрес ссылки и
вставила, как описано «В этом коде добавляйте  название Ваших пунктовменю, а вместо # вставляйте ссылки на необходимые страницы». Сохранив изменения, решила проверить, что же получилось. А
получается то, что при открытии страницы, я попадаю не на страницу гостя (посетителя)
блога, т.е. не туда, где указана информация для посетителя или файл и ссылка на
него,  а на эту страницу в информационной
панели, где  может работать только блогер. Где я допустилаошибку и как мне ее исправить? Помогите, пожалуйста. Спасибо.

4  
Спасибо!

1  
Возможно ли центрировать меню?

0
2  
Попробуйте закрыть в теги HTML- код меню: <center>содержание </center>

0
3  
у меня не получилось

Добавлять комментарии могут только зарегистрированные пользователи.
[ Регистрация | Вход ]


Яндекс.Метрика Рейтинг@Mail.ru
Онлайн всего: 1
Гостей: 1
Пользователей: 0



Категории раздела
Мои статьи [12]
[ID:1] [0]
Софт [0]
Полезные программы для ускорения работы компьютера
Поиск
Категории раздела
Мои статьи [12]
[ID:1] [0]
Софт [0]
Полезные программы для ускорения работы компьютера
Copyright MyCorp © 2018Бесплатный хостинг uCoz