Красивая навигация в постах
Делаем меню из картинок в своих статьях
Помните какие меню из картинок бывают у групп в ВК. Решил я что было бы хорошо такие меню делать и здесь в голосе.
Они выглядят гораздо красивее, нежели просто список ссылок, а статья становится похожа на страницу дизайнерского сайта.
Тем более что разметка Markdown нам этому способствует.
Давайте создадим меню из трех пунктов расположенных горизонтально.
- Создадим каркас с помощью таблицы из трех колонок
<table><tr><td>col1</td><td>col2</td><td>col3</td></tr></table>
col1 | col2 | col3 |
Здесь:
<table>
- это HTML тег, который обозначает, что за ним будут следовать теги для форматирования таблицы. (Можете нарисовать квадрат или прямоугольник - его контур можно представить как этот элемент. У каждого тега есть закрывающий тег (в нашем случае </table>
) он обозначает конец элемента (контейнера с содержимым). Во многие HTML элементы можно вкладывать другие элементы. Мы так и делаем.
<tr>
- этим тегом мы обозначаем строку. То есть на примере нашего прямоугольника мы как бы проводим в нем горизонтальную линию. У нас для нашего меню она одна. Но можно делать сколько угодно. То есть получаются такие прямоугольные контейнеры идущие сверху вниз.
<td>
- а это уже непосредственно сама ячейка, они вкладываются в строки так как идут в таблице горизонтально в ряд - слева направо их также может быть много (у нас сегодня 3).
- Пока у нас внутри ячеек просто текст показывающий номер ячейки
<td>col1</td>
однако для меню нам потребуется вставить ссылки. Для этого нам нужен новый, но самый главный в web-e тег:
<a>
- с помощью этого тега мы можем указать ссылку на любую доступную в интернете страницу. Клик по ссылке соответственно переведет нас на нужную страницу. Однако внутри тега мы указываем содержимое ссылки - например текст или картинку (у нас будут как вы наверное уже догадались картинки). А вот сама ссылка на ресурс указывается в атрибуте HTML-документа. Атрибут - это свойство элемента, позволяющее дополнить или изменить его функционал.
Общий синтаксис таков:
<тег атрибут="значение">содержимое тега</тег>
В нашем случае
<a href="ССЫЛКА">col1</a>
Вместо слова ССЫЛКА мы вставляем ссылку на страницу, на которую нужно перейти. Добыть ее можно в адресной строке браузера в самом верху под вкладками, предварительно перейдя на нужную страницу. У меня например первая ссылка будет на мой аккаунт в фейсбуке:
<a href="https://www.facebook.com/rusldv">col1</a>
Остальные ссылки на другие пункты меню делаются аналогично.
- Чтобы добавить картинку мы используем тег img и его атрибут src
<img src="http://ССЫЛКА_НА_ КАРТИНКУ" />
вместо нашего содержимого тегов - col1 col2 и col3 вставить ссылки на картинки, откуда нибудь из интернета. Давайте покажу как люблю делать я.
Сперва найдем красивый фон для нашего меню. Например в яндекс или google картинках. И сохраним ее себе на компьютере. Хотя может вы сами дизайнер и у вас полно своих :)
Я взял вот такой
Затем нам ее нужно разделить ее на ровные 3 части. Можно конечно для этого воспользоваться фотошопом, но мы программисты люди ленивые, поэтому вот идем сюда и режем на 3 части по горизонтали ))
Затем скачиваем архив вот тут
И затем в любом фоторедакторе (хоть в paint-е) подписываем пункты меню. Также можем добавить иконки или чего еще душе угодно.
После чего я все фотографии выкладываю в свой альбом в ВК. Но это может быть любое место в интернете откуда доступна прямая ссылка на ваши картинки. Затем открываю их в полном размере и как и прежде из адресной строки копирую ссылку, однако теперь уже в атрибут src тега img.
Итак у нас получается следующая разметка, которую мы добавляем в свой пост
<table>
<tr>
<td>
<a href="https://www.facebook.com/rusldv">
<img src="https://pp.vk.me/c604823/v604823133/29254/n9Fzk7UnewY.jpg" />
</a>
</td>
<td>
<a href="https://www.instagram.com/rusldv/">
<img src="https://pp.vk.me/c604823/v604823133/2925d/q66oQh2UK98.jpg" />
</a>
</td>
<td>
<a href="https://golos.io/@rusldv/">
<img src="https://pp.vk.me/c604823/v604823133/29266/96wxOMSTylI.jpg" />
</a>
</td>
</tr>
</table>
А вот результат ее работы
Таким же образом можно делать вертикальные меню. Тогда вы вкладываете по одной ячейке на каждую строку таблицы
<table>
<tr><td>Пункт 1</td></tr>
<tr><td>Пункт 2</td></tr>
<tr><td>Пункт 3</td></tr>
<tr><td>Пункт 4</td></tr>
<tr><td>Пункт 5</td></tr>
</table>
Когда делают дизайн для групп вконтакте применяют еще такой лайфхак - сначала отрисовывают всю красоту на фотошопе, а потом ее делят на части и добавляют в разметку. Правда для этого важно, чтобы не было видно отступы. А тут у меня пока не получается так сделать. Я же не верстальщик )) Возможно следует подобрать правильный размер, если кто знает напишите, пожалуйста в комментарии.
Ну а у меня пока на этом все. Надеюсь кому -то пригодится :)