Golos Blogs

Делаем меню из картинок в своих статьях

Помните какие меню из картинок бывают у групп в ВК. Решил я что было бы хорошо такие меню делать и здесь в голосе.

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

Когда делают дизайн для групп вконтакте применяют еще такой лайфхак - сначала отрисовывают всю красоту на фотошопе, а потом ее делят на части и добавляют в разметку. Правда для этого важно, чтобы не было видно отступы. А тут у меня пока не получается так сделать. Я же не верстальщик )) Возможно следует подобрать правильный размер, если кто знает напишите, пожалуйста в комментарии.

Ну а у меня пока на этом все. Надеюсь кому -то пригодится :)