Итак, для создания дополнительного меню нам потребуется всеядный гаджет HTML/JavaScript, в котором и будет размещаться код нашего дополнительного меню.
Сразу определимся с расположением:
Если гаджет "Страницы" не используется и CSS для него не задан, то можно разместить над/под шапкой блога.
Совместно с гаджетом "Страницы" - над/под блоком сообщений или на боковых панелях.
CSS для всех вариантов одинаковый, только ширина и высота всего блока и элементов внутри - ссылок-кнопок, устанавливается относительно желаемых размеров.
HTML структура, самая простая:
<ul class="CssMenu">
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<!--все ваши ссылки-->
<li class="CssMenu"><a href="#" title="">>Link</a></li>
</ul>
А код CSS будет таким: <li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<li class="CssMenu"><a href="#" title="">Link</a></li>
<!--все ваши ссылки-->
<li class="CssMenu"><a href="#" title="">>Link</a></li>
</ul>
ul.CssMenu {
list-style:none;
padding:0px;
margin:0px;
}
li.CssMenu {
float:left;
padding: 0px;
}
li.CssMenu a{
display:block;
vertical-align: middle;
text-align:center;
font: normal normal 12px Tahoma;
text-decoration:none;
color: #fff;
margin: 0px;
}
li.CssMenu a{
height:50px; /*высота кнопки - подбирается*/
background-image:url(../image.jpg); /*фоновое изображение для ссылок-кнопок*/
background-repeat: no-repeat;
width:90px; /*ширина кнопки - подбирается*/
}
li.CssMenu a:hover{
background-position:-90px 0;
}
Для данного стиля, в качестве фонового изображения, использовалось такое:list-style:none;
padding:0px;
margin:0px;
}
li.CssMenu {
float:left;
padding: 0px;
}
li.CssMenu a{
display:block;
vertical-align: middle;
text-align:center;
font: normal normal 12px Tahoma;
text-decoration:none;
color: #fff;
margin: 0px;
}
li.CssMenu a{
height:50px; /*высота кнопки - подбирается*/
background-image:url(../image.jpg); /*фоновое изображение для ссылок-кнопок*/
background-repeat: no-repeat;
width:90px; /*ширина кнопки - подбирается*/
}
li.CssMenu a:hover{
background-position:-90px 0;
}
Подробнее о применении таких изображений(спрайтов) читайте в этой статье
После изменения расположение гаджета с меню в шаблоне, может потребоваться отрегулировать высоту - height и ширину - width блоков.
Для уменьшения/увеличения количества кнопок просто удалите или добавьте новые ссылки в гаджет с меню в формате:
Для уменьшения/увеличения количества кнопок просто удалите или добавьте новые ссылки в гаджет с меню в формате:
<li class="CssMenu"><a href="#" >Link</a></li>
При использовании в Blogger двух меню - дополнительного меню и гаджета "Страницы" нужно будет задать дополнительный CSS, чтобы убрать просветы между кнопок обеих меню.
.tabs .widget ul a, .tabs .widget ul a:hover, .tabs .widget li a, .tabs .widget li a:hover {
margin: 0;
border: 0;
margin: 0;
border: 0;
Вот пожалуй и все. Буду рад вашим комментариям :)
Интересно. обязательно попробую у себя на блоге.
ОтветитьУдалитьКонечно попробуйте, если что-то не получится обращайтесь - помогу.
УдалитьКстати, скоро опубликую еще пару интересных менюшек для Blogger, так что заходите в гости еще.
Интересно!
ОтветитьУдалитьСчас попробую.
Спасибо за интересную информацию!
С удовольствием присоединился к блогу!
Дерзайте. Я Ваш читатель!:)
Спасибо за приятный коммент и оказанное доверие :)
УдалитьСпасибо за информацию!
ОтветитьУдалитьа не подскажете, как изменить цвет ссылок в гаджете "список ссылок"
по умолчанию назначается цвет ссылок, для всего блога, но как быть, если цвет ссылок в гаджете должен быть другой?
Гаджет "Список ссылок" имеет идентификатор LinkList1 и структуру обычного HTML списка: <UL>-<LI>, и к его элементам можно применить свойства CSS.
УдалитьПример стиля чтобы изменить цвет ссылок:
#LinkList1 a {
color: #00b001;
}
как сделать меню как на этой странице?
ОтветитьУдалить(шапка скрывается, меню фиксируется)
спасибо
http://www.magentawave.com/2013/02/simple-jquery-floating-block.html
УдалитьСпасибо ))) Во многом помогли разобраться )
ОтветитьУдалитьПодскажите, а как сделать меню с картинками??? Ну вот чтобы вверху было два ряда картинок. Нажав на которые ты переходишь в раздел. Например, картинки, салаты, супы. Нажимаем на салаты - переходим на страницу где в две колонки салаты идут
ОтветитьУдалитьПосмотрите здесь
Удалитьhttp://www.magentawave.com/2012/03/imagemenu-on-blogger-with-css.html
А как сделать такое дополнительное меню как у вас на сайте слева, на сером вертикальном прямоугольнике с кнопками?
ОтветитьУдалитьПо возможность опубликую пост с примером.
УдалитьДоброго времени суток! Мне тоже очень понравилось дополнительное меню как у вас на сайте слева, на сером вертикальном прямоугольнике с кнопками! В публикациях не нашла, или еще нет поста? С уважением к вам и вашему труду!
ОтветитьУдалитьПост именно с таким меню вряд ли будет опубликован, т.к. это меню сделано было специально для этого сайта, но вот принцип создания таких меню и основные моменты я конечно же постараюсь осветить в блоге в ближайшее время.
УдалитьСпасибо за отзывчивость! Буду ждать ваше освещение данного вопроса! С уважением к вам и вашему труду!
ОтветитьУдалитьспасибо огромное за подсказки
ОтветитьУдалить