Горизонтальные меню навигации в блог на Blogger
1).
Код для меню, что выше:
#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 0
#navlist a:link { margin: 0
ul#navlist
li#active { color: #95bbae; background-color: #d1e3db; }
#navlist a:hover { color: #
</style>
<br />
<div id="navcontainer">
<ul id="navlist">
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="
<li><a href="Адрес страницы">Ссылка 7</a></li>
</ul>
</div>
2).
<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).
<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)
<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)
<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(http://1.bp.blogspot.com/_7wsQzULWIwo/SzvC_Xa-vHI/AAAAAAAACw0/qVeZI3gdWQM/s1600/Inverted.png) 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)
<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)
<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)
<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>
На этом пока всё. Если ничего на выбрали, то заходите на блог - горизонтальные меню будут ещё.
Комментариев нет:
Отправить комментарий