Блогосфера

Красивое и простое вертикальное меню для сайта css, без знания html

Всем привет. Пишет Денис Повага.

Я люблю тему блога colormag, и мы её используем на большинстве проектов. Я внес в ней несколько сильных доработок, чтобы она была интересней под поисковые системы и выглядела уникальна для наших сайтов, в глазах посетителей. Именно эти доработки, сильно отличают нас от других, кто использует обычную версию шаблона.

И одной из таких примочек, я хочу поделиться в сегодняшнем выпуске. А именно —  как сделать простое красивое меню на сайте, отображаемое у Вас в правом виджете. То есть, вертикальное. Причем, сделать сможете его уже сегодня, самостоятельно. Там нет ничего сложного. Просто скопируете код стиля, и если ваш блог на теме colormag, то автоматически меню преобразится, без лишних корректировок.

Итак. Прежде всего, хочу сказать, что часть моментов, которые вы видите на различных блогах, в плане оформления меню, или каких-либо красивых стилей, вы можете заимствовать, и делать под свой блог. Причем, делается это проще простого, и даже без знания языков программирования. Даже такого простого, как html.

Есть конечно сложные вещи для начинающих, когда код состоит из двух частей и более. Как бы простыми словами — одна часть подгружаемого кода на сайте находится в верхней его части, между тегами head. А другая уже в нужно месте кода страницы. Да ещё и файл стилей используется. В общем, жуть для начинающих )))

… и там, часто бывает очень сложно разораться. То есть, если брать сложное меню, которое многоуровневое, и оно естественно будет и в самом коде выглядеть сложно для начинающих. И не достаточно просто скопировать стиль css, чтобы оно заработало. Там чуть сложнее. Да и не к чему все это… Зачем нам лесть в ДЕБРИ, когда основная цель — это не копаться в процессе, а работать внешне над ним. Не в мелочах разбираться, что и как работает. А развивать свой блог, и зарабатывать деньги. Понимаешь о чем я? Бедность — это роскошь в мелочах! Кто-то сказал из великих, не помню ))

Но есть простые элементы, которые я люблю и часто применяю. Это то, что можно реализовать полностью на стилях css . При этом, я и сам не силен в программировании, и дальше языка html и стилей css — признаюсь не вникаю. Просто оно не нужно. Потому как в каждой области есть свои специалисты. Но понимать основы и принципы, как все работает — все же желательно.

Ну да ладно, лить воду.  Давайте начнем!

Так вот, у одних кто использует тему colormag, меню по умолчанию такое (просто обычные ссылки):

А у других, интересней, и при наведении подсвечивается:

…причем цвет подсветки можно легко и просто поменять. Говорю же, там нет ничего сложного. Вы сами увидите!

…и если вы хотите, чтобы у вас было такое же меню, с подсветкой. То можете просто взять, и скопировать стиль, и разместить у себя в файле стилей, и все заработает также.

Как сделать красивое вертикальное меню. Простая инструкция для начинающих

Прежде всего, давайте перейдем на сайт Дениса Сидорова (сайт мой повар) — нашего ученика и коллеги по цеху  группы класс блогеров WhatsApp, и посмотрим, что да как.

Кстати, вот что написал Денис, вчера:

Посмотрим меню…

Для этого, вам нужно нажать ПРАВОЙ КНОПКОЙ МЫШИ по меню, и выбрать — посмотреть код (в мозиле это может быть проинспектировать элемент. точно не помню, т.к. пользуюсь хромом):

нас интересует прежде всего файл стилей — style.css

Слева находится сам html код, и нажимая правой кнопкой именно по элементу меню, вас сразу переносит в нужную часть кода. То есть, в код меню html. Но html код который слева, нас по сути не интересует, поэтому пугаться не нужно…. Суть в том, что вы видите как это меню сделано обычными списками ul и далее li . Эти теги вы видите слева, в самом меню .

Так вот. Суть в том, что мы можем для этих тегов, задать свое оформление. То есть задать им стиль. Они в данном случае, уже заданы. И вы можете посмотреть какие именно, и скопировать для своего проекта…

Только не забывайте делать резервные копии сайта и БД!

Итак, нас интересует только правая часть, и файл стилей. Нужно скопировать строки стиля, отвечающие за отображение меню, и чтобы быстро их найти, мы нажали правой кнопкой мыши по нужному элементу, затем увидели, что находимся в нужном месте кода, и после этого нажимаем по ссылке — style.css … , которая находится уже в правой части. Вот здесь:

Кстати, не бойтесь нажимать. Там нет ничего опасного…

После клика по ссылке, вас перекинет на нужные строки файла стилей, отвечающего в нашем случае за меню:

Видите, есть однотипные названия :

#categories-3 …

и ниже, даже есть тот самый зеленый цвет. Вы сразу понимаете, что однотипные записи, отвечают за нужный элемент. В нашем случае, за категории. Мы просто смотрим, где начинаются однотипные стили, и где заканчиваются…

и дальше все просто. Копируем от начала до конца нужный код, сначала в блокнот:

вот так:

Затем, смотрите… Мы можем сразу поменять цвет для нашего меню. Конечно, можете ещё много чего поменять и потренироваться. Ну если хотите более глубоко все это дело изучать, то можете почитать про css в сети.

А сейчас, просто без знаний, вы сделаете красивое меню, и зададите нужный ему цвет. Тем более, если у вас тема colormag, то проблем точно не возникнет, и все получится. А нюансы, если будут, то я разберу их ниже, и отвечу в комментариях…

Так вот. Видите эту строчку:

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

Нажмите просто на квадратик цвета или задайте код цвета вручную. Мы будем делать через палитру браузера. Это удобно и быстро. Тем более, можно подогнать цвет под стиль сайта. Или посмотреть сначала, где какой элемент и какой у него цвет, затем скопировать нужный цвет и задать его для меню.

В общем, вот так делайте, и никаких кодов цветов вам тоже знать не нужно!

Хотя, думаю Вы  знаете, что у каждого цвета, есть свой код rgb, и код для html

Ну да ладно, выбрали цвет, и смотрим что получилось…

Теперь просто берем, и выделяем этот самый код цвета, и копируем его:

После чего, вставляем код в блокнот в нужной строке… Там все просто. Попробуйте!

и далее, копируем полностью код для нашего меню из блокнота, уже с нужным цветом….

…и переходим в раздел на нашем уже блоге:

Откроется файл стилей, в котором, в самом низу вставите код меню…

Получится примерно так, как показано ниже.

Не забудьте обновить файл.

ТОЛЬКО ВНИМАНИЕ!!! Ничего не удаляйте там, так как можно испортить отображение на сайте чего-либо другого. А ЕЩЁ ЛУЧШЕ, СКОПИРУЙТЕ ПОЛНОСТЬЮ ФАЙЛ СТИЛЕЙ К СЕБЕ НА КОМПЬЮТЕР, НА СЛУЧАЙ, ЧТОБЫ ВЕРНУТЬ ЕГО. Про бекап говорилось выше.

Суть в том, что есть сам код сайта (html), который отвечает за всю разметку на странице. То есть, содержит коды. Например, тот же заголовок на блоге, имеет код h1 . и т.д.  А помимо всех кодов, есть ещё файл стилей. Файл стилей как раз и отвечает за отображение нужных элементов на странице блога. Простыми словами так. Мы просто нашли, и узнали какой id (categories-3) у нужного элемента тега, и на этот id сделали всю разметку по оформлению для необходимых тегов.

Если у вас не отображается красивое меню, после сохранения, то первое, что нужно сделать — это почистить кеш браузера, или открыть новое окно в режиме инкогнито. В гугл хром делается так:

После чего, вбиваете адрес своего сайта там, и проверяете! Если меню работает, значит поздравляю!!! Вы справились.

Если меню не работает, то скорее всего, на вашем сайте другое значение id . Вы просто можете узнать сначала нужный id, его название которое отвечает за вывод меню (с этого и нужно было начинать. Но у вас ведь тема колормаг, поэтому мы пропустили этот момент, чтобы вам было проще…)

Например, на блоге Маргариты, id=»categories-2″

Вы уже догадались, что нужно сделать?

Просто берем и меняем на нужное значение в файле стилей. Вот здесь:

Вот и все. Здесь все просто. А если у вас и вовсе имя id меню другое, то можно изменить на нужное.

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

Так вот. Пользуйтесь. А если что-либо не получается, пишите ниже в комментариях.

До связи…

Денис Повага

Мой телеграм канал, про блогинг и не только... Присоединиться!

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *