We can help U!: HTML menükódok

Sziasztok! Véget ért a szavazást, úgyhogy hozom is a nyertest. 13 szavazattal nyertek a HTML kódok, úgyhogy most betartva ígéretem, hozom is a kódokat. Ha szeretnétek még ilyen posztokat, pipáljatok. És arra kérek mindenkit, hogy aki felhasználja a kódokat, vagy visz belőlük, az jelezze valamilyen formában. (pipa, hozzászólás stb.) A kódokat, kedvetek szerint, úgy változtatjátok meg, ahogy akarjátok. Ha bármi kérdésetek lenne a kódokkal kapcsolatban, írjatok nekem. Remélem segítségetekre lehettem! :D Jó válogatást!

Illetve raktam ki újabb szavazást, hogy mi legyen a következő. Annyi a változtatás, hogy kiszedtem közülük a HTML kódokat és hozzáadtam a Karaktereket.

Ui.: Hogy tetszik az új design? :)

A kódok a FuckinWayGportálról származnak.

(A demot egyenlőre nem tudom megcsinálni, ezért képeket rakok be.)

1. Menükód

<ul class="menu2">


<li>

<a href="URL CÍM HELYE">MENÜ NEVE 1</a></li>



<li>

<a href="URL CÍM HELYE">MENÜ NEVE 2</a></li>



<li>

<a href="URL CÍM HELYE">MENÜ NEVE 3</a></li>



<li>

<a href="URL CÍM HELYE">MENÜ NEVE 4</a></li>


</ul>


 

<style type="text/css">

ul.menu2{

margin: 0;

padding: 0;

list-style: none;

}

 

ul.menu2 li{

width: 150px; /*menü szélessége*/

clear:left; 

overflow: hidden;

}

 

ul.menu2 li span{

display: block;

float: left; 

min-width: 0px; 

margin-bottom: 5px;

padding: 8px;

color: #5d5d5d;

}

 

ul.menu2 li:hover span{

color: #fff;

background: #ce3e3e;

border-left: 8px solid darkred;

min-width: 450px; 

-webkit-box-shadow: 0 0 5px gray;

-moz-box-shadow: 0 0 5px gray;

box-shadow: 0 0 5px gray;

-webkit-transition: all 0.3s ease-out;

-moz-transition: all 0.3s ease-out;

-o-transition: all 0.3s ease-out;

transition: all 0.3s ease-out;

}</style>

2. Menükód

<ul class="menu2">

<div id="menu">


  <ul>


<li><a href="URL CÍMED HELYE">Menü 1</a></li>



<li><a href="URL CÍMED HELYE">Menü 2</a></li>



<li><a href="URL CÍMED HELYE">Menü 3</a></li>


  </ul>


</div>


 

<style>

h1 {

font-family:Verdana, Arial, Helvetica, sans-serif;

font-size:16px;

font-weight:bold;

margin:0;

padding:0;

}

 

hr {

border:none;

border-top:1px solid #CCCCCC;

height:1px;

margin-bottom:25px;

}

 

ul {

list-style: none;

margin: 0;

padding: 0;

}

 

img {

border: none;

}

#menu {

width: 200px;

margin: 10px;

}

 

#menu li a {

height: 32px;

   voice-family: "\"}\""; 

   voice-family: inherit;

   height: 24px;

text-decoration: none;

}

 

#menu li a:link, #menu li a:visited {

color: #FFF;

display: block;

background:  url(http://fuckinway.gportal.hu/portal/fuckinway/image/gallery/1374213969_79.gif);

padding: 8px 0 0 30px;

}

 

#menu li a:hover {

color: #FFF;

background:  url(http://fuckinway.gportal.hu/portal/fuckinway/image/gallery/1374213969_79.gif) 0 -32px;

padding: 8px 0 0 30px;

}

</style>

4. Menükód

<ul class="menu2">

<table border="0" width="198">

<tbody>


<tr>

<td width="100%">

<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 1</a></td>

</tr>



<tr>

<td width="100%">

<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 2</a></td>

</tr>



<tr>

<td width="100%">

<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 3</a></td>

</tr>



<tr>

<td width="100%">

<a class="menulink" href="http://www.fuckinway.gportal.hu">Menü címe 4</a></td>

</tr>


</tbody>

</table>


 

<style type="text/css">

 

A.menulink {

display: block;

background-color:#BC8F8F;

width: 198px;

text-align: center;

text-decoration: none;

font-family:georgia;

font-size:16px;

color: #ffffff;

BORDER: none;

border: solid 0px #FFFFFF;

-webkit-border-top-left-radius: 80px;

-webkit-border-top-right-radius: 70px;

-webkit-border-bottom-left-radius: 40px;

-moz-border-radius-topleft: 80px;

-moz-border-radius-topright: 70px;

-moz-border-radius-bottomleft: 40px;

border-top-left-radius: 80px;

border-top-right-radius: 70px;

border-bottom-left-radius: 40px;

-webkit-transition-duration: .50s

}

 

A.menulink:hover {

font-family:georgia;

border: solid 0px #00BFFF;

color: #ffffff;

background-color:#E9967A;

-webkit-border-top-left-radius: 80px;

-webkit-border-top-right-radius: 70px;

-webkit-border-bottom-left-radius: 40px;

-moz-border-radius-topleft: 80px;

-moz-border-radius-topright: 70px;

-moz-border-radius-bottomleft: 40px;

border-top-left-radius: 80px;

border-top-right-radius: 70px;

border-bottom-left-radius: 40px;

-webkit-transition-duration: .50s

} </style>

5. Menükód - Ennél a kódnál a blogod alján jelenik meg a menü.

<ul class="menu2">

<div class="menu">


<a href="URL CÍM HELYE">Menü 1</a> 

<a href="URL CÍM HELYE">Menü 2</a> 

<a href="URL CÍM HELYE">Menü 3</a> 

<a href="URL CÍM HELYE">Menü 4</a> 

<a href="URL CÍM HELYE">Menü 5</a> 

  </center>
</div>
<<textarea cols="8" id="code-source" name="code-source" rows="2" style="background-color: #95B9C7; height: 60px; margin: 2px; width: 165px;"><ul class="menu2">

<div class="menu">


<a href="URL CÍM HELYE">Menü 1</a> 

<a href="URL CÍM HELYE">Menü 2</a> 

<a href="URL CÍM HELYE">Menü 3</a> 

<a href="URL CÍM HELYE">Menü 4</a> 

<a href="URL CÍM HELYE">Menü 5</a> 

  </center>
</div>
</div>


 

<style>

.menu {

 background: url();

 background-color:#a7b8b6;

 bottom: 0px; left: 0px; z-index: 100;

 width:100%;-moz-box-shadow: 0px -4px 9px #808080;

-webkit-box-shadow: 0px -4px 2px #eee;

box-shadow: 0px -4px 2px #eee;

 padding:10px;

 text-align:center;

 position:fixed;

 height:15px;}

 .menu a{

  text-align:center;

 

  background:#fff;

  color:#000;

  font-family:georgia;

  font-style:italic;

  padding:5px;

  opacity:0.8;}

  .menu a:hover{

  color:#8FC0BB;}

  .page {margin-top:20px;

   text-align:justify;

   width:760px;

  }

 </style>

Tudom, hogy nem volt olyan sok kód, de azért remélem, hogy hasznotokra válik.

2014. augusztus 6., szerda

HTML menükódok

Nincsenek megjegyzések:

Megjegyzés küldése