HTML Menü Yapma Kodu

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:

<style type="text/css">

#modernbricksmenu2{

padding: 0;

width: 100%;

border-top: 8px solid #0F9D58; /*color theme*/ 

}

#modernbricksmenu2 ul{

margin:0;

text-align:center; 

  width : 100%; 

  list-style: none; 

  padding:0; 

}

#modernbricksmenu2 li{

display: inline;

margin: 0 1px 0 0;

padding: 0;

text-transform:uppercase;

display:inline-block;

}

#modernbricksmenu2 a{

float: left;

display: block;

font: bold 16px Roboto, sans-serif;

color: black;

text-decoration: none;

margin: 0 1px 0 0; /*Margin between each menu item*/

padding: 5px 20px;

background-color: #EFEFEF; /*color theme*/ 

border-top: 0px solid white;

}

#modernbricksmenu2 a:hover{

background-color: #0F9D58; /*color theme*/ 

color: white;

}

#modernbricksmenu2 #current a{ /*currently selected tab*/

background-color: #0F9D58; /*color theme*/ 

color: white;

border-color: #0F9D58; /*color theme*/ 

}

</style>

<div id="modernbricksmenu2">

<ul>

<li style="margin-left: 1px"><a href="https://www.webkenti.net/p/webseyyah-dan-alnt-yapma-kosullar.html" title="Copyright">TELİF HAKKI !</a></li>

<li><a href="https://www.webkenti.net/view/flipcard" title="New">ARŞİV</a></li>

<li id="current"><a href="https://www.webkenti.net/" title="Home">ANA SAYFA</a></li>

<li><a href="https://www.webkenti.net/p/hakkmzda.html" title="About us">HAKKIMIZDA</a></li>

<li><a href="https://www.webkenti.net/p/iletisim.html" title="Contact">İLETİŞİM</a></li>

</ul></div>

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

HTML / JAVASCRIPT EKLEMEK

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.