Создание вертикального или горизонтального меню
Образцы меню
1.Вертикальное
2. Горизонтальное
Как создать самому
В качестве предисловия. Я долго бороздил просторы интернета, нашёл много разных менюшек (что-то работало, что-то нет), но я решил чисто для себя разобраться в правильности написания горизонтального/вертикального меню для того что бы быть уверенным что там нет ничего лишнего, да и в конце концов сделать СВОЁ меню, а не содранное у кого-то. Своё оно всегда лучше. Я постараюсь разложить всё, что я нашёл, в этом посте максимально понятным языком для чайников таких как я. Те кто не хочет сам мастерить меню, может сразу переходить к образцам или гуглить в поисках подходящего меню.
И так начнём
Самое первое, на что я бы обратил внимание, это на то где расположить меню
Это на ваш выбор где его располагать, По моему мнению это самые правильные (стандартные) места расположения, но это не ограничивает ваши возможности и ваша фантазия вам в помощь.
Хотя HEADER я не использую для этого, но многии это делают, Я в основном пользуюсь CROSS_COLUMN или CROSS_COLUMN 2 в зависимости от того что мне там нужно.
Самое простое меню которое можно создать самому и в принципе с чего всё и начинается:
Нажимаем "добавить гаджет"
Выбираем из списка нужный гаджет "HTML/JavaScript"
И вставляем то что написано ниже красным в открывшееся окно
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a></li>
<li><a href="#">Пункт 4</a></li>
</ul>
И нажимаем "Сохранить" Далее нажимаем "Сохранить расположение"
И смотри что у нас появилось на нашем блоге (ПОСЛЕ КАЖДЫХ ИЗМЕНЕНИЙ ОБНОВЛЯЙТЕ СТРАНИЧКУ ЧТО БЫ УВИДЕТЬ ИЗМЕНЕНИЯ, ЕСЛИ НЕ ПОЯВЛЯЮТСЯ ЖМЁМ Ctrl+Shift+Del И ЧИСТИМ КЕШ ПОСЛЕ ЧЕГО ЕЩЁ РАЗ ОБНОВЛЯЕМ)
На моём тестовом сайте, (так как я и добавлял) появились два меню горизонтальное и вертикальное.
Далее дело техники или в панеле управления блогом жмём "Изменить" или на сайте нажимаем рисунок отвёртки с ключом
или или 
Открывается знакомый нам редактор гаджита
И редактируем его под наш сайт можем добавлять, убирать или редактировать наше меню.
В место решётки (#) ваша ссылка куда отправит посетителя сайта при нажатии на кнопку меню Пункт 1...Пункт 4 это название кнопки которое будет светиться на сайте.
ПРИМЕЧАНИЕ: Внутренние ссылки (на сообщения, страницы, ярлыки, изображения, видео и т.д и т.п. размещённые на вашем блоге) пишутся без адреса вашего блога :
ПРИМЕР: Ваш блог находиться по адресу: http://blablabla.blogspot.com
Неправильно:
<li><a href="http://blablabla.blogspot.com/2015/11/blog-post.html">Пункт 3</a></li>
Правильно:
<li><a href="/2015/11/blog-post.html">Пункт 3</a></li>
Внешние ссылки которые ведут за ваш блог пишутся полностью:
<li><a href="http://sasha753357.blogspot.com/2015/07/blog-post_88.html">Как создать меню</a></li>
Если у вас есть кнопка "Главная страница" то для того что бы при нажатии на её посетителя отправляло на главную нужно вместо # просто поставить слеш /
<li><a href="/">Главная страница</a></li>
И так, переходим к украшению меню.
ВНИМАНИЕ: соблюдайте все знаки используемые в скриптах. Основной причиной не отрабатывания той или иной функции(скрипта), ошибка в синтаксисе(пропустили запятую или иной знак, или букву, или не так, или не то поставили)
Как вам такой вид меню?
<li><a href="#"><src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmORJdKrWE2s5rk4hD8RDiCfohKGJ6ELiE48iNbLI3uf7iKRrmSjog79OUb5GjFf_sD1hAidP20WUnBRQb6mZ8nsvvAbu-8DubOhixn_7WBiLDi6TepAXYCJh60Y-iScnzzmpy92SgzgI4/s150/d01294da047c.png" img height="40" title="Главная страничка" /></a></li>
<li><a href="#"><src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbszaVlSbj9djxwiC4Z96wjCDbGg_ioy7DV8F86RVJTpQEIeMUwbZwYZXYwdxtnt6T7qdca97Ct6SSnjZkgwTbN3wQuoRb_8ZV027BmqUN3zCj61g-q9es_MbPqQubbib5izKwMkZTa4qb/s150/2b930135f3fd.png" img height="40" title="Немного обо мне" /></a></li>
<li><a href="#"><src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiElJPiNreBvZR75CetcLJw57Vof7GbkzcgLtsL8OR2VvOgukwzHrWiaIm3qzQhyphenhyphenOYzYpFFMwiXSZAou1E0We5Mh38rxlXP8t71PluEJcgbGhC1EvDOdkwXwc9b8LD2IrYiqM-S5pGtV5L0/s150/5c3ce61c374f.png" img height="40" title="Магазин" /></a></li>
</ul>
В коде меню я специально разделил абзацами все отдельные элементы, дабы не путаться что и куда
Самый простой способ, для избегания CSS стилей, а также для создания того что с CSS не возможно или очень очень сложно, нам понадобиться картинка созданная в фотошопе (или в другом редакторе изображений) или содранная в интернете. Этот способ лучше тем, что вы можете создать любой вид для меню, в плоть до анимированного, всё ограничивается только вашей фантазией. И так чтобы вставить картинку в меню нам нужно:
1. Адрес на изображение (то есть если вы его сделали сами то нужно его загрузить в инет, лутше для блога в альбом Picasa вашего блога, но это не обязательно, но лутше туда)
2. Отредактировать для каждой ссылки, кнопки или пункта меню (кому как нравиться)
<li><a href="#">Главная страница</a></li>
В данном случае В место Главная страница нужно прописать <img src="http://адрес картинки.png" height="40" title="Заголовок" />
У нас должно получиться следующее для главной страницы:
<li><a href="#"><img src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmORJdKrWE2s5rk4hD8RDiCfohKGJ6ELiE48iNbLI3uf7iKRrmSjog79OUb5GjFf_sD1hAidP20WUnBRQb6mZ8nsvvAbu-8DubOhixn_7WBiLDi6TepAXYCJh60Y-iScnzzmpy92SgzgI4/s150/d01294da047c.png" height="40" title="Главная страничка"/></a></li>
где height="40" - это размер изображения, а title="Главная страничка" - текст отображаемый при наведении курсора.
Сделали(скачали) анимашку, указали на её ссылку вот вам и анимированное меню
Для простой "анимашки" (при наведении курсора менялась картинка) редактируем в нашем меню <li>...</li>, а именно:
1. Убираем title="Главная страничка" (так как при наведении нам нужно не сообщениее, а другая картинка);
2. добавляем что подчёркнуто где:
а) onmouseout действие при убирании курсора
б) onmouseover действие при наведении курсора
this.src= ссылка на картинку в случае "а" на картинку при убирании курсора, в случае "б" при наведении курсора
this.height= размер изображения в случае "а" и в случае "б"
<li><a href="#"><src="https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmORJdKrWE2s5rk4hD8RDiCfohKGJ6ELiE48iNbLI3uf7iKRrmSjog79OUb5GjFf_sD1hAidP20WUnBRQb6mZ8nsvvAbu-8DubOhixn_7WBiLDi6TepAXYCJh60Y-iScnzzmpy92SgzgI4/s150/d01294da047c.png" img height="40"
onmouseout="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgmORJdKrWE2s5rk4hD8RDiCfohKGJ6ELiE48iNbLI3uf7iKRrmSjog79OUb5GjFf_sD1hAidP20WUnBRQb6mZ8nsvvAbu-8DubOhixn_7WBiLDi6TepAXYCJh60Y-iScnzzmpy92SgzgI4/s150/d01294da047c.png'; this.height=40;"
onmouseover="this.src='https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhbszaVlSbj9djxwiC4Z96wjCDbGg_ioy7DV8F86RVJTpQEIeMUwbZwYZXYwdxtnt6T7qdca97Ct6SSnjZkgwTbN3wQuoRb_8ZV027BmqUN3zCj61g-q9es_MbPqQubbib5izKwMkZTa4qb/s150/2b930135f3fd.png'; this.height=40;" /></a></li>
Смотрим что у нас получилось на кнопке главная страница
М-да. получилось не совсем просто, но я старался разжевать как можно проще.
Создаём многоуровневое меню
Для тех кого устраивает один уровень, но хочет украсить по средствам CSS, пропускаем данную часть и опускаемся к созданию красоты через CSS
Теперь мы начинаем создавать ни что иное как подуровни к примеру у нас в меню есть пункт музыка, а хотим добавить туда подпункты рок, джаз, поп, классика и т.д. (но в нашем примере будем идти пунктами)
Первым делом нам нужно это дописать в наше существующее меню и так открываем на редактирование наш гаджет содержащий меню и добавляем следующее:
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a>
<ul>
<li><a href="#">Пункт 3,1</a></li>
<li><a href="#">Пункт 3,2</a></li>
<li><a href="#">Пункт 3,3</a></li>
<li><a href="#">Пункт 3,4</a></li>
</ul>
</li>
<li><a href="#">Пункт 4</a></li>
</ul>
Человеческим языком это можно объяснить так: в третью кнопку мы вставили ещё один блок, а правильно:
мы открыли тег <li> который определяет отдельный элемент списка,
открыли тег <a href="#"> для создания ссылки и указали куда нас данный элемент списка отправит, указали текст данного элемента списка Пункт 3, закрыли тег </a>
и добавили в этот не закрытый элемент списка ещё один список...
после чего мы закрыли тег </li> дав понять что этот второй список относиться только к третьему элементу списка.
Таким же образом добавляются и на другие элементы списка дополнительные списки, можно их делать двух, трёх уравневыми и до бесконечности... Один из таких я отобразил в низу, но работать пока мы будем с предыдущим, который попроще, что бы не сломать голову:
<ul>
<li><a href="#">Пункт 1</a></li>
<li><a href="#">Пункт 2</a></li>
<li><a href="#">Пункт 3</a>
<ul>
<li><a href="#">Пункт 3,1</a></li>
<li><a href="#">Пункт 3,2</a>
<ul>
<li><a href="#">Пункт 3,2,1</a></li>
<li><a href="#">Пункт 3,2,2</a></li>
<li><a href="#">Пункт 3,2,3</a></li>
<li><a href="#">Пункт 3,2,4</a></li>
</ul>
</li>
<li><a href="#">Пункт 3,3</a></li>
<li><a href="#">Пункт 3,4</a>
<ul>
<li><a href="#">Пункт 3,4,1</a></li>
<li><a href="#">Пункт 3,4,2</a></li>
<li><a href="#">Пункт 3,4,3</a></li>
<li><a href="#">Пункт 3,4,4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Пункт 4</a>
<ul>
<li><a href="#">Пункт 4,1</a></li>
<li><a href="#">Пункт 4,2</a></li>
<li><a href="#">Пункт 4,3</a></li>
<li><a href="#">Пункт 4,4</a></li>
</ul>
</li>
</ul>
Я постарался всё выделить визуально отступами и цветом, что бы было понятней что и куда относиться, но пока можете не ломать сильно голову, нам пока будет достаточно нашего.
Всё сохраняем, обновляем и смотрим что у нас получилось...
У меня вышло как то так...
НЕ ПУГАЙТЕСЬ ЧТО ОНО ТАК ВЫГЛЯДИТ НАМ ЕЩЁ ПРЕДСТОИТ ЕГО СПРЯТАТЬ НУ СООТВЕТСТВЕННО СДЕЛАТЬ ОЧЕНЬ И ОЧЕНЬ КРАСИВЕНЬКИМ
Фух, а сегодня хватит...
<style>
#mymenu {
width: 200px;
margin: 0 auto;
}
#mymenu .mydiv {
width: 200px;/*ширина всего меню*/
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border-radius: 15px;
-moz-border-radius: 15px;
-webkit-border-radius: 15px;
}
.mydiv h3{height: 40px;
cursor:pointer;
margin: 0 0 0 0;
text-align: center;
color:white;padding: 12px 0px 0px 0px;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #8b00ff;/*цвет наружного меню*/
}
#mymenu p {
text-align: center;
margin: 0 0 1px 0;
height: 0px;
overflow: hidden;
transition: height ease-in-out 500ms;
-o-transition: height ease-in-out 500ms;
-moz-transition: height ease-in-out 500ms;
-webkit-transition: height ease-in-out 500ms;
border-radius: 5px;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
background: #0065db; /*цвет фона внутреннего меню*/
filter: progid:DXImageTransform.Microsoft.gradient
( startColorstr='#E1A3370', endColorstr='#E1A337',GradientType=0 );
}
#mymenu p:hover {
background: #999999;
cursor:pointer;
}
#mymenu div:hover > p {
height: 40px;padding: 12px 0px 0px 0px;
}
* html #mymenu .mydiv {
filter: progid:DXImageTransform.Microsoft.gradient
(startColorstr='#4EAEC1', endColorstr='#055261',GradientType=0 );
height: 45px;
overflow: hidden;
forIE: expression(
onmouseover = function() {this.className += ' hover'},
onmouseout = function() {this.className = this.className.replace('hover', '')}
);
}
* html #mymenu .mydiv.hover {
height: auto;
}
#mymenu p a {
color:white;
}
</style>
<div id="mymenu">
<div class="mydiv">
<h3 >Название заголовка 1</h3>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
</div>
<div class="mydiv">
<h3>Название заголовка 2</h3>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
</div>
<div class="mydiv">
<h3>Название заголовка 3</h3>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки "вверх"</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
</div>
<div class="mydiv">
<h3>Название заголовка 4</h3>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
<p><a href = "http://адрес ссылки">название ссылки</a></p>
</div></div>
Комментариев нет:
Отправить комментарий