Генератор меню css – (X)html Menu Generator — free css javascript menu horizontal vertical menu generator menu maker online web 2.0 free menu maker generator html css navigation bar

Содержание

6 лучших генераторов CSS-кода

6 лучших генераторов CSS-кода

Как начинающие, так и опытные верстальщики не могли не заметить, что вместе с новыми возможностями в CSS3 технологиях, объем самого css-кода, существенно увеличился. Только не подумайте, что я против развития и прогресса в веб-разработке и жалуюсь на то, что дескать приходится больше писать кода.

Вовсе нет! Ведь до появления CSS3 многие вещи, например такие, как скругленные углы, градиенты, тени, можно было делать только в виде графики. Это требовало больше времени, а веб-страница получалась тяжелой и медленно загружалась. К счастью сегодня эти проблемы остались позади и современный веб-разработчик обладает еще большим арсеналом в разработке сайтов.

Скажем так, опытный разработчик быстро разберется во всех новшествах, а вот новичку придется больше затратить времени на понимание и написание «разросшегося» кода.

Я — за разумный расход времени как опытного верстальщика, так и новичка. Поэтому советую всем использовать в верстке CSS генераторы кода. Пользоваться CSS генераторами кода очень просто, задаются некоторые нужные параметры. В демонстрационном окошке можно видеть все происходящие изменения и когда вы выберете окончательный результат, нажимаете кнопку «сгенерировать», копируете и вставляете в свой CSS файл стилей.

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

Генераторы CSS-кода представляют собой бесплатные (платные мы сейчас не рассматриваем) онлайн-сервисы. После долгих тестов, я выбрал несколько из них, на мой взгляд наиболее удобных и полезных, которые мы сейчас и рассмотрим.


1.CSS3 Playground

6 лучших генераторов CSS-кода.

CSS3 Playground — универсальный генератор CSS3 кода с широким диапазоном свойств.На скриншоте видно, как я используя ползунки CSS генератора, создал серый текстовый блок с закругленными углами и градиентом, а ниже вы видите сгенерированный код. Только посмотрите, сколько строчек кода вам пришлось бы написать вручную. Это фантастика! Пусть вас не беспокоит, что выбор в генераторе цвета и названий шрифтов ограничен. Просто выбираете близкие к вашему макету цвета и шрифты, а потом меняете их на нужные в вашем css-файле стилей.


2.CSS Button Generator

6 лучших генераторов CSS-кода.

CSS Button Generatorгенератор CSS3 кнопок. На левой стороне выбираем стиль кнопки, на правой подбираем параметры для формирования кнопки, посередине видим результат. Полученный

CSS3-код копируем в свой проект.


3.Ultimate CSS Gradient Generator

6 лучших генераторов CSS-кода.

Создать градиент посредством CSS3-кода не так просто. К счастью существует отличный инструмент — генератор градиента. CSS Gradient Generator имеет интерфейс как у Photoshop, создает кросс-браузерный код с учетом браузера IE.


4.CSS3 Menu Generator

6 лучших генераторов CSS-кода.

Генератор меню поможет вам создать CSS3 меню. В примере опции настроены на выпадающее меню второго уровня. Но автор предупреждает, что градиент в основном меню не корректно отображается в IE. В таком случае опцию с градиентом в редакторе можно отключить.


5.WAIT! Animate

6 лучших генераторов CSS-кода.

Теперь можно создавать анимацию без написания кода JavaScript, а работать лишь c CSS3. Для того есть специальный сервис – генератор анимации, где можно создать анимацию, настраивая нужные значения параметров и получить готовый css-код, который можно уже применить к своим объектам.


6.Flexbox Generator

6 лучших генераторов CSS-кода.

Flexbox Generator значительно облегчит труд верстальщика. Технология FlexBox очень нужная и полезная в блочной верстке, применение которой существенно упрощает верстку. Однако новичку, она может показаться сложной для понимания. С данным сервисом будет намного легче начинающему разобраться в принципах ее работы.

Для тех кто не знает, Flexbox

– это новый способ размещать блоки на странице, специально для этого созданный в отличии от float-ов.

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

  • 6 лучших генераторов CSS-кода. Создано 16.11.2017 11:00:00
  • 6 лучших генераторов CSS-кода. Михаил Русаков

Копирование материалов разрешается только с указанием автора (Михаил Русаков) и индексируемой прямой ссылкой на сайт (http://myrusakov.ru)!

Добавляйтесь ко мне в друзья ВКонтакте: http://vk.com/myrusakov.
Если Вы хотите дать оценку мне и моей работе, то напишите её в моей группе: http://vk.com/rusakovmy.

Если Вы не хотите пропустить новые материалы на сайте,
то Вы можете подписаться на обновления: Подписаться на обновления

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

Если Вам понравился сайт, то разместите ссылку на него (у себя на сайте, на форуме, в контакте):

Free CSS Drop Down Menu Generator

  • Items
  • Parameters
  • Templates
Create beautiful pure css menus and buttons! Download Free Trial! Please register to save results.
It’s easy and free!
Awesome CSS3 Drop Down Menus & Buttons! Try Now for Free!
  1. CSS Hover Effect
    Multi-level drop-down menu that’s built entirely with CSS (without any JS).
    More:
    • Drop-Down Menus, Horizontal Style
    • Elegant Drop Menu with CSS only
    • GRC’s Script-Free Pure-CSS Menuing System
    • Tutorial: CSS Multilevel Dropdown Menu

  2. クールなドロップダウンメニューをオンラインで作成 ダウンロードして使える「Pure CSS Menu」 かっこいいドロップダウンのCSSメニューを作りたいというとき、色々なところで作り方を調べたりするかと思います。
    そんなときに手っ取り早くクールなCSSメニューを作れてダウンロードして使えるサービスをご紹介。

  3. Pure CSS Drop-Down Menus
    Pure CSS Menu are lightweight – just a few kb in size, work on almost every known browser (Internet Explorer, Firefox, Opera, Safari, Mozilla, Chrome, Netscape Navigator, etc) – even those that have JavaScript turned off and one of the things I like the most: CSS menus are search-engine friendly!also by Using Pure CSS Menu you can create CSS dropdown menus online for free without even having to know a single bit of CSS or HTML. There is no registration required, all you have to do is add the text to be displayed, the link where the user should be redirected after clicking the text and an optional tooltip. Obviously, being pure CSS, you can also customize it’s font type, size, font color or background (in normal state or on hover) and so on. Using Pure CSS Menu, you can add as many multi-level submenu items as you want, select from some templates if you want to create your menu in seconds and also the menus can be either horizontal or vertical.

  4. A practical tool and — surprisingly — delivers exactly what we need, unlike most sites that deliver large files and poorly formatted. Pure CSS Menu code delivers a clean and relatively mild, including the rails for compatibility with Internet Explorer 6, known to not work right with the most advanced CSS. Although limit somewhat the scope for relying on the templatesThe Pure CSS Menu is one of those sites that should be favorite for anyone working to create web. At a minimum, the service offered can save much time.

  5. Pure CSS Menu is for developers who are not very familiar with CSS syntax — or who can not really lose much time wrapped these codes. Using this omline menu generator, you can create menus of different levels of complexity, including hierarchical submenus.
    The site offers three tabs where you will define the details of your menu. In Items, You determine each link of the menu, and the hierarchy between them, a tree view similar to Windows Explorer. To edit the information in this item, the Item Parameters panel at the bottom of the screen is used. There, you can determine the text that will be shown on the menu, the Internet address where the item points out, a tooltip of the link, and whether it should be opened in the same tab or not.

    Parameters Tab. You can change the font and colors used in the menu. The alphabets available for the menu are those commonly used on the web, to ensure compatibility and stability of the layout. The change of colors can be made through the HEX code of the desired color, or by selecting it with the mouse on a color table. The colors listed in the left column are on the menu in a normal state, and the right refer to the menu items under the mouse pointer. From bottom to top, the color selection refers to the text, the background and border.
    The third tab allows you to select the Template for your menu. So far, the eight models are available, ranging from minimalist layouts horizontal to vertical menus very similar to the contextual menus in Windows. After selecting the template for the menu items and adjust their parameters and to best fit your project, simply click the download button and save the ZIP file. When you decompress this ZIP you’ll find all HTML, css and image files required for the menu.

  6. Сервис, позволяющий в визуальном режиме создавать выпадающие css меню , не использующие в своей работе java-скрипты. В наличии около 10 различных шаблонов меню, которые можно легко настроить под себя.

  7. Pure CSS Menu to bardzo przydatny generator online, który pozwoli nam stworzyć rozwijane menu w czystym css. Niesamowicie łatwo jest je skonfigurować, a następnie umieścić na własnej stronie. Możemy skorzystać z gotowych szablonów menu, lub stworzyć własny dostosowując kolorystykę i czcionkę do naszej strony. Po dodaniu pozycji w menu oraz przypisaniu im odpowiednich linków możemy je za darmo pobrać.

  8. Con PureCSSmenu es muy sencillo generar un menú para el blog; aún los más complejos con varios niveles de submenues y todo lo hacemos online.
    Con una ventana muy sencilla, podemos ir agregando item por item o bien utilizar algunos de los templates predefinidos y cambiar los parámetros gráficos, establecer los enlaces y definir si se van a abrir en una nueva ventana o no. Una vez que lo tenemos armado, lo descargamos a nuestra PC. Será un archivo ZIP que contendrá una página HTML de la cual podremos extraer las definiciones de estilo.

  9. Pure CSS Menu é uma excelente ferramenta que lhe permite menus CSS drop-down, sem a necessidade de quaisquer conhecimentos de design, em poucos cliques. Atualmente há 8 modelos, que podem ser personalizados a gosto.

    É possível adicionar ou excluir itens ou links, definir fontes e cores, o link destino, e assim por diante. Sempre observando uma previsualização das alterações, no lado direito da tela.

  10. ¿Qué ventajas me ofrece puro css menús desplegables? Bueno, son ligeros — a pocos kb de tamaño, el trabajo en casi todos conocido navegador (Internet Explorer, Firefox, Opera, Safari, Mozilla, Chrome, Netscape Navigator, etc) — incluso los que se han desactivado JavaScript y una de las cosas que más me gusta: CSS menús son motor de búsqueda de amistad!

  11. オンラインでドロップダウン型のナビゲーションを簡単に作成できるサービス「Pure CSS Menu」を紹介します。
    サイトのキャプチャ

    デザインは用意されたテンプレートから選択が可能で、背景とテキストの色変更や、ナビゲーションの構造を変更することもできます。 プレビューでは日本語の表示にも対応しています(書き出しもOK)。

    ナビゲーションの生成はプレビューが完成したら、下の「Download」をクリックするとファイル一式がダウンロードできます。

    対応ブラウザの明記はありませんが、生成したファイルを見る限りではIE6まで対応していました。

  12. PureCSSMenu.com : Es un generador en línea de menús desplegables del tipo CSS, se ofrece en forma gratuita. Este software es capaz de crear un menú desplegable sin JavaScript, en un 100% en CSS, ofrece menús CSS horizontales y también menús del tipo vertical. El usuario simplemente necesitará realizar tres sencillos pasos para poder construir sus menús CSS.

  13. La herramienta se llama: “purecssmenu”, tiene varias opciones: le pueden cambiar el estilo de fuente, el fondo del menú, el color a la hora de activarlos, tiene diferentes estilos, etc. Yo encuentro esta herramienta muy útil porque aparte de ser (gratuita) no tienen que complicarse la vida diseñando estilos nuevos o en otro lenguaje como (JavaScript).

    Solo entran a la página y empiezan a modelar su (menú), despues hay un bótón del lado derecho para que bajen el archivo que crearon y lo integren a su diseño o editor de páginas preferidos. Espero les sea útil.

Как сделать красивое выпадающее меню

Если Вы занимаетесь веб-дизайном либо у Вас есть собственный сайт (блог), то Вы знакомы с тем, как создается меню и пункты в нем. Если мы рассматриваем какую-либо систему управления сайтом (CMS), то там вручную создавать пункты меню не надо – всё делается на автомате. Это с одной стороны хорошо, а с другой стороны плохо…


Автоматическое создание меню хорошо тогда, когда пользователь вообще не имеет представления о том, что такое HTML, PHP, CSS, JavaScript. В CMS достаточно ввести названия страниц, рубрик и т.п. и меню будет сформировано. А вот плох такой режим его создания тем, что если Вам необходимо внести какие-то правки в структуру меню, то тут без специалиста уже не обойтись. Более того, даже специалисты зачастую вынуждены коренным образом переписывать код вывода меню CMS, чтобы удовлетворить желания заказчика (кстати исполнителей рекомендую искать здесь).

Скажу больше: если мы возьмем самую популярную на сегодняшний день CMS – WordPress, то названия рубрик в сайдбаре сортируются автоматически по алфавиту. Изменить порядок их вывода без специального плагина силами самой CMS нельзя…

Если Вы хорошо знаете HTML, JavaScript, то создать меню любого вида для Вас не представляет никакой сложности. А вот если эти языки программирования Вы знаете лишь поверхностно или вовсе о них слышите впервые, то задача окажется для Вас скорее всего неподъемной, особенно если дело касается выпадающего меню.

Pure CSS Menu – онлайн генератор меню для сайта. С его помощью Вы сможете сделать выпадающее вертикальное либо горизонтальное меню с необходимым количеством подпунктов.

пример выпадающего меню

Пример горизонтального выпадающего меню

Выпадающее меню в данном редакторе создается на чистом HTML и CSS без использования JavaScript. Это несомненный плюс, т.к. зачастую в браузерах отключен JavaScript, и тогда Ваше меню у посетителей не будет работать так как следует.

Кому может быть полезен сервис

  • веб-мастерам, хорошо знающим  языки программирования, т.к. позволит им значительно сократить время на рутинной операции написания кода меню;
  • владельцам собственных сайтов или блогов, которые хотят создать меню, но не знают, как это делается.

Как создать меню


Создание меню при помощи сервиса Pure CSS Menu происходит в визуальном редакторе. Для начала на вкладке «Templates» выберите необходимый шаблон меню из восьми доступных. Не обращайте пока внимания на количество пунктов и подпунктов меню, размер шрифта, цвет и пр. – всё это можно настроить, перейдя в закладку «Parameters». выбор шаблона меню

Выбор шаблона меню

настройка параметров меню

Настройка параметров меню

Пункты и подпункты меню, их названия, порядок следования, ссылки и пр. определяются в настройках редактора, которые можно найти, перейдя по закладке «Items». Т.к. многие не знают английского, объясню значение кнопок этого окна.

настройка пунктов меню

Настройка пунктов меню

1 – добавить пункт меню в конец всего списка
2 — добавить пункт меню сразу за активным (выделеным) в редакторе пунктом
3 – добавить подпункт в активный (выделеный) пункт меню
4 – удалить пункт (подпункт) меню
5 – удалить все пункты меню с подпунктам

Не забудьте указать ссылки для каждого пункта меню, подсказки при наведении и способ открытия ссылок в соответствующих полях под областью предпросмотра меню!

свойства пунктов меню

Свойства пунктов меню

После того, как Вы окончательно настроите внешний вид и функциональность Вашего выпадающего меню, нажимайте кнопку «Download» и сохраняйте на своем компьютере архив со всем необходимыми файлами (для этого необходимо зарегистрироваться).


Внутри архива Вы найдете папку «images» с графическими файлами, которые используются в меню, а также файл «purecssmenu.html» со сгенерированным кодом. Загружайте папку с картинками в директорию Вашего сайта, вставляйте код меню в нужное место и наслаждайтесь отличным выпадающим меню, написанном на простом HTML + CSS.

Видеоурок по созданию выпадающего меню:

Друзья, понравился ли Вам данный сервис? Знаете ли Вы более качественные аналоги? Делитесь своими впечатлениями в комментариях.

Автор статьи: Сергей Сандаков, 39 лет.
Программист, веб-мастер, опытный пользователь ПК и Интернет.

CSS3-генераторы. Лучшее / Habr

Доброго времени суток! Сразу объяснюсь по поводу оформления поста: однажды, наткнувшись на статью о CSS-генераторах, меня не сильно порадовало безмерное количество информации и навигационных элементов в представленных генераторах, и еще больше — их пользовательский интерфейс! Возмутило то, что инструменты для работы со стилями — сами не выдержаны в рамках возможностей, которые они представляют… как так?!

Когда занимаешься творчеством, хочется иметь подручные средства и инструменты на освоение и работу с которыми тратишь минимум усилий и времени. В результате всего этого, пришла мысль: отобрать лучшие инструменты и организовать их для частого использования (а-ля навигационное меню, такой себе: Quick Launch).

Надеюсь, для многих ноу-хау станет хорошим помощником в процессе веб-разработки.


  • CSS3.me — простой, элегантный и в то же время многофункциональный CSS-генератор, с красивым доменом
  • CSS3Maker.com — очень обширный функционал для работы с новыми функциями CSS3, кросс-браузерность, гибкость и полный набор всего необходимого;
  • CSS3Generator.com — ничего лишнего, для любителей классики и простоты, одним словом «old school»;
  • Colorzilla.com — генератор градиентов для создания красивых фоновых изображений, с поддержкой большинства браузеров и без применения картинок (чистый CSS).

  • Button builder — инструмент для конструирования кнопок, с выдержкой в ритме Web 2.0. Среди функционала, можно отметить возможность настройки: внутренних отступов, размера текста, закругленность углов и выбора цветов градиента;
  • Form builder — конструктор формы, который позволяет настроить внешний вид как формы в целом, так и отдельные ее элементы;
  • Icon builder — почувствуйте себя вольным художником, создавая новые иконки для своих кнопок, менюшек и фавиконов;
  • Ribbon builder — для создания стильных ленточек на чистом CSS, воспользуйтесь данным инструментом, с широким спектром настроек и опций.
Картинки в виде кнопок(иконок) в начале статьи — кликабельны!

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

Подборка генераторов CSS / Habr

Не секрет, что писать CSS для многих стандартных кнопок, макетов, etc. бывает весьма лениво. Ниже представлена подборка генераторов CSS (и не только), которая, возможно, в некоторых случаях сможет упростить кому-то жизнь. Многими генераторами можно успешно пользоваться даже без глубоких познаний CSS.

(Осторожно! Много картинок)

Собственно, сам список генераторов, картинки кликабельны.

Button Maker Online

Этот сервис предоставляет средства для создания небольших кнопок 80×15, также доступен размер 88×31.

CSS Generator

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

CSS Generator

Кроме стандартных возможностей типа редактирования цвета, позволяет изменять оформление ссылок.

CSS Font and Text Style Wizard

Сервис предоставляет возможности для редактирования свойств шрифта и оформления текста.

Cascading Style Sheets — CSS – Generator

Немного устаревший (но годный) генератор, возможно, кому-то он понравится.

Cascading Style Sheet CSS Generator

Неплохой сервис для работы со стилями.

CSS Layout Generator

Как можно понять из названия, сервис используется для генерации макетов.

CSS Menu Generator

Используется для генерации CSS (или HTML) кода для меню.

CSS Button & Text Field Generator

Генератор текстовых полей и кнопок. Весьма интерактивный.

CSS Form Code Maker

Сервис предоставляет инструмент для создания макетов для форм.

CSS Layout Generator

Простенький генератор. Позволяет создавать несложные макеты как для «резиновой» верстки, так и для фиксированной.

CSS Rounded Box Generator

Генератор кода для блоков со скругленными углами.

FavIcon Generator

(Не совсем в тему) Генератор для favicon стандартного размера 16х16.

Firdamatic

Генератор макетов без таблиц. Макеты создаются простым заполнением форм.

Gradient Image Maker

Генератор градиентных картинок. Тоже не совсем в тему, но он полезен как генератор фона для, например, тех же кнопок.

HTML and CSS Table Border Style Wizard

Можно использовать для экспериментов с border-стилями.

JotForm

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

List-O-Matic

Генератор навигации, основанной на списках. Для оформления использует CSS.

quickCSS

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

QrONE CSS Designer

Очередной CSS генератор. Возможно, кому-то покажется полезным.

Ribbon Rules Generator

Генератор для так называемых «Ribbon Rules». Для генерации использует различные оттенки одного цвета.

RoundedCornr Generator

Еще один генератор для блоков со скругленными углами.

SKY CSS TOOL

Генерирует код для CSS классов.

Spanky Corners

Генератор отдельных скругленных углов.

Spiffy box

Генератор для блоков с одним скругленным углом 🙂

Spiffy Corners

Генератор скругленных углов без картинок и JavaScript.

The Generator Form

Очередной генератор CSS для форм.

YAML Builder

Сервис с интерактивным интерфейсом для создания YAML.

СSStemplater

Генератор макетов. Поддерживает «резиновую» и фиксированную верстку. Есть возможность добавления шапки и футера.

Генератор шаблона на 1-3 колонки

CSS3please

Кросс-браузерный генератор правил для CSS3.

CSS3 generator

CSS3 gradient generator

Предложения по наполнению топика прошу писать в комментариях.

20 CSS3 генераторов которые облегчат жизнь дизайнеру

Здравствуйте, друзья. Хочу поделиться с Вами несколькими полезными CSS фишками. А именно сегодня тут Вы найдёте несколько CSS3 генераторов, которые существенно облегчат Вам жизнь если Вы дизайнер, верстальщик или же просто новичок в этом не простом деле. Здесь собраны генераторы на самую разнообразную тематику, Вы сможете сделать кнопки, закруглить углы квадратного блока, добавить разнообразные эффекты для текста, ну и ещё множество полезных вещей. Чтобы не потерять это всё добро, Вы можете сразу же добавить эту страницу в закладки.

Спасибо http://www.cssauthor.com так же рекомендую интересное:

CSS3 генератор теней, закруглённых углов, цвета и много го другого

Перейти

CSS3 генератор полезных вещей для дизайнера

Перейти

Генератор градиентов, теней и закруглённых углов на CSS

Перейти

Генератор для создания тени текста

Перейти

CSS3 генератор для создания 3D текста

Перейти

CSS генератор для создания градиентной заливки

Перейти

Генератор цветов

Перейти

Генератор CSS для чайников

Перейти

Генератор самых нужных свойств на CSS

Перейти

Генератор закруглённых углов для блока на CSS

Перейти

Генератор самых нужных CSS правил и свойств для дизайнера

Перейти

Генератор CSS спрайтов

Перейти

Генератор правильных CSS правил

Перейти

Создание меню с помощью простого CSS генератора

Перейти

Простой генератор кнопок на CSS

Перейти

Ещё один отличный генератор кнопок для сайта

Перейти

Градиентная заливка на CSS3

Перейти

CSS генератор круглых углов

Перейти

CSS генератор для создания лёгкого и чистого CSS — кода

Перейти

Многофункциональный CSS3 генератор для создания кнопок

Перейти

CSS Menu Generator — программа для создания меню для блога


   Как сгенерировать горизонтальное меню, вертикальное или выпадающее меню на CSS. Такое меню хорошо индексируется поисковиками, мало весит и исправно работает. Кроме того, отлично встраивается и работает на blogspot. Я уже приводила примеры и коды таких меню для блога. Однако, если вы совсем не понимаете в кодах, а это необходимо хотя бы для того, чтобы заменить цвета и поставить свои ссылки в код или просто не любите “ковыряться в кодах”, то этого CSS генератор CSS Menu Generator специально для вас. Вы можете скачать программу здесь >>>. Размер exe файла равен 500 kB.
Интерфейс программы CSS Menu Generator:
  1. Начинаем работу с первой вкладки Menu Item. Здесь добавляем пункты нашего меню, даем им названия (Item) и указываем ссылки (links). Для этого вначале нажмите на кнопкуNew Затем заполните поля:

    Для того, чтобы редактировать страницу выберите нужный пункт и нажмите на кнопку Edit (редактировать).
  2. Теперь переходите на одну из вкладок CSS Menu Generator:
    • Horizontal menu (горизонтальное меню),
    • Vertikal menu (вертикальное меню),
    • или Combo-box menu (выпадающее меню).

    в зависимости от того, какой вид меню вам нужен.
    Рассмотрим на примере создания горизонтального меню. Выбираем соответствующую вкладку и выставляем нужные настройки меню:

    • background – фон, цвет кнопок меню,
    • text color – цвет текста,
    • active background – цвет фона выбранного (активного) пункта меню,
    • active text color – цвет текста активного пункта меню.
    • border color – цвет рамки,
    • separator color – цвет разделительных линий кнопок.
    • selected item – активный по умолчанию пункт меню.
    • font-family – шрифт,
    • font-style – стиль шрифта,
    • font-weight – толщина шрифта,
    • top, left, bottom, right – сверху, слева, снизу и справа соответственно означают сколько пикселей толщина линии рамки.

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

    Вы можете ничего не исправлять, так как после того, как вы вставите в шаблон блога сгенерированный в CSS menu generator код меню, оно будет отображаться на blogspot нормально.

  3. Получение кода CSS меню во вкладке HTML/CSS код

  • Копируйте CSS код из верхнего окошка (выделено оранжевым цветом). Для того, чтобы скопировать код нажмите кнопку “Copy to clipboard”. Его нужно вставить в шаблон блога между тегами <head> и </head>. Переходите в html редактор шаблона, воспользовавшись поиском по странице (горячие клавиши Ctrl + F), найдите отрезок кода </head> и  вставьте перед ним css код меню для блога.
  • Копируйте html код меню для блога (выделено желтым цветом), в блоге перейдите во вкладку “Дизайн” и вставьте код меню в виджет HTML/JavaScript в нужное место страницы.

Опубликовано Иванова Наталья

Смотреть все записи от Иванова Наталья

Навигация по записям

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

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