Горизонтальные меню навигации в блог ,8 примеров

Устанавливаются горизонтальные меню в блог довольно просто. В окне "Дизайн" надо выбрать место для добавления гаджета (виджета). Затем на это место вставить гаджет "HTML-javascript", со скопированным в него кодом выбранного горизонтального меню. После этого можно вносить свои правки отступов, рамки, цвета меню, адресов и ссылок, выделенных красным цветом, визуально контролируя изменения. Вообще, редактировать коды на горизонтальные меню можно как в блокноте, так и непосредственно в окне гаджета. 1). Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 Код для меню, что выше: <style> #navcontainer { /* none needed */ } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0px 4px 0px; background-color: #666666; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0px; padding: 5px 9px 4px 9px; color: #FFFFFF; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #FFFFFF; background-color: #FE9C54; } </style> <br /> <div id="navcontainer"> <ul id="navlist"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> <li><a href="Адрес страницы">Ссылка 7</a></li> </ul> </div> 2). Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 <style> #navcontainer { float:left; width:100%; background:#FFFFFF; font: bold 7.5pt Verdana; line-height:normal; border-bottom:1px solid #6659A7; border-top:1px solid #6659A7; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font-family: verdana, arial, sans-serif; font-size: 9px; font-weight: bold; margin: 0; padding: 5px 0 4px 0; background-color: #6659A7; border-top: 1px solid #e0ede9; border-bottom: 1px solid #e0ede9; }  #navlist a, #navlist a:link { margin: 0; padding: 5px 9px 4px 9px; color: #FFFFFF; border-right: 1px solid #d1e3db; text-decoration: none; } ul#navlist li#active { color: #95bbae; background-color: #d1e3db; } #navlist a:hover { color: #666; background-color: #FFFFFF; } </style> <br /> <div id="navcontainer"> <ul id="navlist"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> <li><a href="Адрес страницы">Ссылка 7</a></li> </ul> </div> 3). Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 <style> #tabs { font: bold 7.5pt Verdana; } #navcontainer { float:left; margin: 0; padding: 8px 0px; width:100%; background:#575656; font-size:93%; line-height:normal; } ul#navlist { margin: 0; padding: 0; list-style-type: none; white-space: nowrap; } ul#navlist li { float: left; font: bold 7.5pt Verdana; line-height: 14px; margin: 0; padding: 5px 0 5px 0; } #navlist a, #navlist a:link { margin: 0; padding: 10px; color: #fff; border: 4px solid #575656; text-decoration: none; }  #navlist a:hover { color: #fff; border: 4px solid #fff; } </style> <br /> <div id="navcontainer"> <ul id="navlist"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> </ul> </div> 4) Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 <style> #tabs1 { font: bold 7.5pt Verdana; } #tabs9 img { border: none; } #navcontainer { margin: 10px 0 0 0px; padding: 0; height: 20px; } #navcontainer ul { border: 0; margin: 0; padding: 0; list-style-type: none; text-align: center; } #navcontainer ul li { display: block; float: left; text-align: center; padding: 0; margin: 0; } #navcontainer ul li a { background: #fff; width: 60px; height: 18px; border-top: 1px solid #ddd; border-left: 1px solid #ddd; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; padding: 0; margin: 0 0 5px 0; color: #666; text-decoration: none; display: block; text-align: center; font: normal 10px/18px verdana; } #navcontainer ul li a:hover { color: #6659A7; background: #eeeeee; } #navcontainer a:active { background: #c60; color: #fff; } #navcontainer li#active a { background: #c60; border: 1px solid #c60; color: #fff; } </style> <br /> <div id="navcontainer"> <ul id="navlist"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> <li><a href="Адрес страницы">Ссылка 7</a></li> </ul> </div> 5) Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 <style> .container { width: 520px; padding: 0 0 5px 0; margin: 3px 0 10px 0; background: #fff; } #nav { margin: 0; padding: 0; border-top: 3px solid #5F6A71; } #nav li { margin: 0; padding: 0; display: inline; list-style-type: none; } #nav a:link, #nav a:visited { float: left; font: bold 7.5pt verdana; line-height: 14px; padding: 9px; text-decoration: none; color: #708491; } #nav a:link.active, #nav a:visited.active, #nav a:hover { color: #666; background: url([url]https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKF2gMzhH9P5kl3t66v-M5Qdf3cs2UwP3c2YJo7Bm76YNCDfBvnFplP1y4_CXVoyRPTP4SbIqEIFKmjKSvt1y7WiA5faqLYgu0_I1WjSJZ2dswFXt470U7ycXbhgwcodrMI3warbwQnF4/s1600/Inverted.png[/url]) no-repeat top center; border-top: 4px solid #5F6A71; } </style> <br /> <div class="container"> <ul id="nav"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> <li><a href="Адрес страницы">Ссылка 7</a></li> </ul> </div> 6) Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 Ссылка 7 <style> #navcontainer { background: #369; border-top: 1px solid #9CC; margin-top: 20px; font: normal normal 11px Verdana, Geneva, Arial, Helvetica, sans-serif; } #navlist { list-style: none outside none; margin: 0; padding: 0; } @media all { #navlist { text-align: center } } #navlist li { bottom: 11px; display: inline; line-height: 1.2em; margin: 0; padding: 0; position: relative; } html>body #navlist li { background: #000; margin: 0 3px 0 0; padding: 4px 0px 4px 0; } #navlist a, #navlist a:link, #navlist a:visited { background: #900; border: 1px solid #FFF; bottom: 2px; color: #FFF; cursor: pointer; display: inline; height: 1em; margin: 0; padding: 3px 5px 3px 5px; position: relative; right: 2px; text-decoration: none; } #navlist a:hover { background: #C00; bottom: 1px; color: #FFF; position: relative; right: 1px; } #navlist a:active { background: #999; bottom: 0px; color: #FFF; position: relative; right: 0px; } #navlist li#active { background: #369; bottom: 13px; display: inline; margin: 0 3px 0 0; padding: 0; position: relative; } html>body #navlist li#active { background: #000; margin: 0 4px 0 4px; } #navlist #active a, #navlist09 #active a:link, #navlist09 #active a:visited, #navlist09 #active a:hover { background: #369; border-bottom: none; border-left: 1px solid #9CC; border-right: 1px solid #9CC; border-top: 1px solid #9CC; bottom: 0; color: #FFF; cursor: text; margin: 0; padding: 2px 5px 0 5px; position: relative; right: 0; } </style> <br /> <div id="navcontainer"> <ul id="navlist"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> <li><a href="Адрес страницы">Ссылка 7</a></li> </ul> </div> 7) Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 <style> .container { width: 500px; padding: 15px; margin: 3px 0 20px 0; border: 1px solid #ccc; background: #fff; } /* square */ #navSquare { margin: 0; padding: 0 0 20px 10px; border-bottom: 1px solid #9FB1BC; } #navSquare li { margin: 0; padding: 0; display: inline; list-style-type: none; } #navSquare a:link, #navSquare a:visited { float: left; font-size: 12px; line-height: 14px; font-weight: bold; padding: 0 12px 6px 12px; text-decoration: none; color: #708491; } #navSquare a:link.active, #navSquare a:visited.active, #navSquare a:hover { color: #000; background: url(file://localhost/C:/Program%20Files/CSS%20Tab%20Designer%202/styles/Square/Square.gif) no-repeat bottom center; } </style> <br /> <div class="container"> <ul id="navSquare"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> </ul> </div> 8) Ссылка 1 Ссылка 2 Ссылка 3 Ссылка 4 Ссылка 5 Ссылка 6 <style> #navcontainer { background: #f0e7d7; margin: 0 auto; padding: .4em 0 .2em 0; font-family: georgia, serif;  font-size: 14px; } /* to stretch the container div to contain floated list */ #navcontainer:after { content: "."; display: block; line-height: 1px; font-size: 1px; clear: both; } ul#navlist { list-style: none; padding: 0; margin: 0 auto; width: 80%; font-size: 0.8em; } ul#navlist li { display: block; float: left; margin: 0; padding-bottom: 2px; } ul#navlist li a { display: block; width: 100%; padding: 0.5em; border-width: 1px; border-color: #ffe #aaab9c #ccc #fff; border-style: solid; color: #777; text-decoration: none; background: #f7f2ea; } #navcontainer> ul#navlist li a { width: auto; } ul#navlist li#active a { background: #f0e7d7; color: #800000; } ul#navlist li a:hover, ul#navlist li#active a:hover { color: #800000; background: transparent; border-color: #aaab9c #fff #fff #ccc; } </style> <br /> <div id="navcontainer"> <ul id="navlist"> <li><a href="Адрес страницы">Ссылка 1</a></li> <li><a href="Адрес страницы">Ссылка 2</a></li> <li><a href="Адрес страницы">Ссылка 3</a></li> <li><a href="Адрес страницы">Ссылка 4</a></li> <li><a href="Адрес страницы">Ссылка 5</a></li> <li><a href="Адрес страницы">Ссылка 6</a></li> </ul> </div> источник:   http://ob-bl.blogspot.com/2014/01/horizont-menu01.html