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

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


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

Горизонтальное меню в блоггер
Оцените статью
Добавить комментарий

Adblock
detector
Яндекс.Метрика