Горизонтальное меню в блоггер

Автор Admin На чтение 7 мин Просмотров 1.7к. Обновлено 15.04.2021

Скопируйте код, поставьте свои значения цвета кнопок, цвет шрифта, ссылки и вставьте в гаджет HTML/JavaScript

Код

<style>
  <!—
  div#menunav {
  float: left;
border-top: 0px solid #EB7777;
border-bottom: 0px solid #ffffff;
font-size: 18px;
background-color: #340B09;
padding: 5px 5px 5px 5px;
margin: 5px 0;
  }
  div#menunav ul {
  margin: 0px;
  padding: 5px;
  }
  * html div#menunav ul {
  float: left;
  border-left: 1px solid #ffffff; /* левая вертикальная черта к ul */
  margin-left: 15px;
  }
  * html div#menunav a {
  display: block;
  }
  div#menunav li {
  float: left;
  list-style-type: none; /* без маркеров списка */
  background-color: #340B09; /* цвет кнопки до наведения */
  border-right: 1px solid #FFFFFF; /* разделительные линии между li */
  }
  div#menunav li:first-child {
  border-left: 1px solid #FFFFFF; /* первая вертикальная линия меню */
  }
  div#menunav a {
  text-decoration: none; /* без подчёркивания ссылок */
  padding: 5px 18px;
  color: #ffffff;/* цвет шрифта */
  }
  div#menunav a:hover {
  color: #ffffff;
  }
  div#menunav li:hover {
  background-color: #57130F; /* цвет кнопки после наведения */
  }
  —>
  </style>
  <div id=»menunav» style=»width: 100%;»> <!— shirina menu —>
  <ul>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Главная</a></li> <!— vasi ssilki —>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Контакты</a></li>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Разное</a></li>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Уроки</a></li>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Свежее<sup><font color=»#ff0000″>new</font></sup></a></li>
  <li><a href=»http://www.blogger.com/home?pli=1″ title=»Войти»>Войти</a></li>
  </ul>
  </div>

Как редактировать код с горизонтальным меню на css?

Код состоит из двух частей html:

Код

<div id=»menunav» style=»width: 100%;»> <!— shirina menu —>
  <ul>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Главная</a></li> <!— vasi ssilki —>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Контакты</a></li>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Разное</a></li>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Уроки</a></li>
  <li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>Свежее<sup><font color=»#ff0000″>new</font></sup></a></li>
  <li><a href=»http://www.blogger.com/home?pli=1″ title=»Войти»>Войти</a></li>
  </ul>
  </div>

и css (заключен междутегами style):

Код

<style>
  <!—
  div#menunav {
  float: left;
border-top: 0px solid #EB7777;
border-bottom: 0px solid #ffffff;
font-size: 18px;
background-color: #340B09;
padding: 5px 5px 5px 5px;
margin: 5px 0;
  }
  div#menunav ul {
  margin: 0px;
  padding: 5px;
  }
  * html div#menunav ul {
  float: left;
  border-left: 1px solid #ffffff; /* левая вертикальная черта к ul */
  margin-left: 15px;
  }
  * html div#menunav a {
  display: block;
  }
  div#menunav li {
  float: left;
  list-style-type: none; /* без маркеров списка */
  background-color: #340B09; /* цвет кнопки до наведения */
  border-right: 1px solid #FFFFFF; /* разделительные линии между li */
  }
  div#menunav li:first-child {
  border-left: 1px solid #FFFFFF; /* первая вертикальная линия меню */
  }
  div#menunav a {
  text-decoration: none; /* без подчёркивания ссылок */
  padding: 5px 18px;
  color: #ffffff;/* цвет шрифта */
  }
  div#menunav a:hover {
  color: #ffffff;
  }
  div#menunav li:hover {
  background-color: #57130F; /* цвет кнопки после наведения */
  }
  —>
  </style>

Редактируем html код, поставляя свои ссылки, анкоры и встплывающие подсказки:

Код

<div id=»menunav» style=»width: 100%;»> <!— shirina menu —>
<ul>
<li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>ваш текст ссылки</a></li>
<li><a href=»ссылка на страницу блога» title=»всплывающая подсказка»>ваш текст</a></li>
<li>….</li>
…
<li>….</li>
<li><a href=»ссылка» title=»подсказка»>текст ссылки</a></li>
</ul>
</div>

Отредактируйте цвета кнопок и текста в css части кода.

Вставьте в гаджет html/javascript и сохраните изменения.

Что должно получиться (нажмите для просмотра анимации):

Горизонтальное меню в блоггер

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