Blogger Navigasyonlu Açılır Yatay Menü Yapma Kodları
İnternet sitelerinde sıkça rastladığımız menüleri nasıl yapabileceğimiz hakkında bir kaç menü kodu. Kodlar açık ve istediğiniz gibi kullanabilirsiniz.
Özelleştirebilir renkleri vs. değiştirebilirsiniz. HTML bilgisi olanlar kolayca kullanabilirler.
Style 1.
<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 0 4px 0;
background-color: #666; border-top: 1px solid #e0ede9; border-bottom:
1px solid #e0ede9; } #navlist a, #navlist a:link { margin: 0; padding:
5px 9px 4px 9px; color: #fff; border-right: 1px solid #d1e3db;
text-decoration: none; } ul#navlist li#active { color: #95bbae;
background-color: #d1e3db; } #navlist a:hover { color: #fff;
background-color: #FE9C54; } </style> <div
id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name 1</span></a></li>
<li><a href="Link 2"><span>Name
2</span></a></li>
<li><a href="Link 3"><span>Name
3</span></a></li>
<li><a href="Link
4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name
5</span></a></li>
<li><a href="Link 6"><span>Name
6</span></a></li>
<li><a href="Link 7"><span>Name
7</span></a></li>
</ul> </div>
Style 2:
<style> #tabsE { float:left; width:100%; background:#000; font:
bold 7.5pt Verdana; line-height:normal; } #tabsE ul { margin:0;
padding:10px 10px 0 50px; list-style:none; } #tabsE li { display:inline;
margin:0; padding:0; } #tabsE a { float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiKZoffGacW36ViwtXtr93w68hWq3E_k6tgDVP-a0sKSwIx8xbNE9d_GWdExf09L4jjvfLrduIyqyLaNdye3nVQpbLAnErqJsofQ90Mzl6qwnPyt3P2WQD9wRYP2tLPQ0CaQ2TminjC3Dc/s1600/tableftE.png)
no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#tabsE a span { float:left; display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjJpf7lcIGoGpzQs5HH6GPmVNMN1y_90MXX_uX3eXXnO5_LDmrf_iPO7UzuqzjTHSWkBZVT7imL7v74NMyODetknRq0nj674Xii2UQbsCzNIP6SfKvGb1SmqBg1pL5bEcfI9E6N7gt1UwI/s1600/tabrightE.png)
no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsE a span
{float:none;} /* End IE5-Mac hack */ #tabsE a:hover span { color:#FFF; }
#tabsE a:hover { background-position:0% -42px; } #tabsE a:hover span {
background-position:100% -42px; } </style> <div id="tabsE">
<ul>
<li><a href="Link 1"><span>Name
1</span></a></li>
<li><a href="Link 2"><span>Name
2</span></a></li>
<li><a href="Link 3"><span>Name
3</span></a></li>
<li><a href="Link
4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name
5</span></a></li>
<li><a href="Link 6"><span>Name
6</span></a></li>
<li><a href="Link 7"><span>Name
7</span></a></li>
</ul> </div>
Style 3:
<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, #navlist #active a:link, #navlist
#active a:visited, #navlist #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> <div id="navcontainer"> <ul id="navlist">
<li><a href="Link 1"><span>Name
1</span></a></li>
<li><a href="Link 2"><span>Name
2</span></a></li>
<li><a href="Link 3"><span>Name
3</span></a></li>
<li><a href="Link
4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name
5</span></a></li>
<li><a href="Link 6"><span>Name
6</span></a></li>
<li><a href="Link 7"><span>Name
7</span></a></li>
</ul> </div>
Style 4:
<style> #tabsH { float:left; width:100%; background:#000;
font: bold 7.5pt Verdana; line-height:normal; } #tabsH ul { margin:0;
padding:10px 10px 0 50px; list-style:none; } #tabsH li { display:inline;
margin:0; padding:0; } #tabsH a { float:left;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg1tbqA3keSo_suG6fwFco_Pz4NYturGh3JF9wxVip0D-sfF42TlO8lMW5VYcvvU8ciM4Gl-zfR_ld9mmmRRVm4kkliPJGuouv3xHQK8PsEf7wYKrk1BJcQyeZE4z-7JxB5c8Crf_z6ps4/s1600/tableftH.png)
no-repeat left top; margin:0; padding:0 0 0 4px; text-decoration:none; }
#tabsH a span { float:left; display:block;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjsMonjRQm_1iuz5z2jkkjkXRkXUhU1b9ffR3ApiWGVQrpLIQd7dXaPRx2szMiTK8o5gWBCNS6rtZr-h2t_e8IBS3txbMKLjadyjOi6JGgitD9UZcNLtl-1j-lO-vEMSZhdGNvdkDB6UM0/s1600/tabrightH.png)
no-repeat right top; padding:5px 15px 4px 6px; color:#FFF; } /*
Commented Backslash Hack hides rule from IE5-Mac \*/ #tabsH a span
{float:none;} /* End IE5-Mac hack */ #tabsH a:hover span { color:#FFF; }
#tabsH a:hover { background-position:0% -42px; } #tabsH a:hover span {
background-position:100% -42px; } </style> <div id="tabsH">
<ul>
<li><a href="Link 1"><span>Name
1</span></a></li>
<li><a href="Link 2"><span>Name
2</span></a></li>
<li><a href="Link 3"><span>Name
3</span></a></li>
<li><a href="Link
4"><span>Name4</span></a></li>
<li><a href="Link 5"><span>Name
5</span></a></li>
<li><a href="Link 6"><span>Name
6</span></a></li>
<li><a href="Link 7"><span>Name
7</span></a></li>
</ul> </div>
Style 5:
text-align:center; display:inline-block; : Menü ortalamak için eklediğimiz kodlar.
"Link 1" : Bağlantı URL
Name 1 : Görünecek Başlık
Widget (gadget) olarak eklemek için :
Blogger > Yerleşim > Gadget ekle > HTML/JavaScript yolunu izleyerek istediğiniz yere ekleyebilirsiniz
Sayfa içinde kullanmak için :
Blogger > Yeni yayın oluştur > HTML yolunu izleyerek istediğiniz yere ekleyebilirsiniz.
* Canlı Demo için :
https://www.w3schools.com/html/tryit.asp?filename=tryhtml_intro
Kod Editörünü kullanabilirsiniz.
http://www.dynamicdrive.com/style/csslibrary/category/C1/
YanıtlaSil