Designer Points: Menükódok (1)

Első:

Kódja:

<div class="widget-content">
<center>
    <ul id="navigation">
<li>
            <a href="https://www.blogger.com/link.html">Link 1</a></li>
<li>
            <a href="https://www.blogger.com/link.html">Link 2</a></li>
<li>
            <a href="https://www.blogger.com/link.html">Link 3</a></li>
<li>
            <a href="https://www.blogger.com/link.html">Link 4</a></li>
</ul>
</center>
<style type="text/css">
#navigation {
   margin: 0;
   padding: 0;
   list-style-type: none;
   list-style-image: none;
   list-style: none;
}
#navigation li {
   margin-bottom: 2px;
}
#navigation a {
   background: #D8DAD3;
   color: #000000;
   font-size: 12px;
   display:inline-block;
   width: 200px;
   padding-bottom: 2px;
   padding-top: 2px;
   border: 0px;
   text-shadow:15px 0px transparent, -15px 0px transparent;
   -webkit-transition-duration:0.5s;
   -moz-transition-duration:0.5s;
   -ms-transition-duration:0.5s;
   -o-transition-duration:0.5s;
   transition-duration:0.5s;
}
#navigation a:hover {
   background: #808080;
   color: #ffffff;
   text-decoration: none;
   text-shadow:0px 0px #333, -0px 0px #333;
   -webkit-transition-duration:0.5s;
   -moz-transition-duration:0.5s;
   -ms-transition-duration:0.5s;
   -o-transition-duration:0.5s;
   transition-duration:0.5s;
   border: 0px;
}
-->    </style>
<div style="border-radius: 52px; box-shadow: 9px 5px 8px #1B7EB8, -1px -0px 3px #1B7EB8; padding: 17px; text-align: justify; width: 120px;">

Második:

A kettőskereszt helyére ezt írd:

<li>

<a href="Blogod címe"><span>Ismerj meg</span> <span>Rólam</span></a><img src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394485_73.jpg" /></li>

<li> Kódja:

<br />
<div id="mh-menu">
<ul>
<li>
            <a href="https://www.blogger.com/blogger.g?blogID=3284452792731626549#">Ismerj meg Rólam</a><img src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394485_73.jpg" /></li>
<li>
            <a href="https://www.blogger.com/blogger.g?blogID=3284452792731626549#">Oldal Információk Az oldal dolgai</a><img src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394477_52.jpg" /></li>
<li>
            <a href="https://www.blogger.com/blogger.g?blogID=3284452792731626549#">Mindennapjaim Blog</a><img src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394470_55.jpg" /></li>
<li>
            <a href="https://www.blogger.com/blogger.g?blogID=3284452792731626549#">Beszélgessünk Chat</a><img src="http://aranymeli.gportal.hu/portal/aranymeli/image/gallery/1383394462_84.jpg" /></li>
</ul>
</div>
<style type="text/css">
ul
{
list-style-type: none;
padding: 0px;
margin: 0px;
}
#mh-menu{
    height: 385px;
    width: 600px;
    position: relative;}
#mh-menu li a{
    display: block;
    width: 280px;
    padding: 0px 10px;
    text-align: right;
    position: relative;
    z-index: 10;
    background: #fff;
    height: 97px;
    border-right: 1px solid #ddd;
    background-color: rgba(255,255,255, 0.8);
}
#mh-menu li:nth-child(1):hover a{
    background-color: rgba(174,54,55,0.9);
}
#mh-menu li:nth-child(2):hover a{
    background-color: rgba(195, 210, 67, 0.9)
}
#mh-menu li:nth-child(3):hover a{
    background-color: rgba(211, 132, 57, 0.9);
}
#mh-menu li:nth-child(4):hover a{
    background-color: rgba(142, 116, 99, 0.9);
}
#mh-menu li a span{
    display:block;
}
#mh-menu li a span:first-child{
    font-weight: 700;
    font-size: 16px;
    color: #ddd;
    padding-top: 10px;
    font-family: 'Alegreya SC', Georgia, serif;
}
#mh-menu li a span:nth-child(2){
    font-weight: 400;
    font-style: italic;
    font-size: 28px;
    font-family: 'Alegreya SC', Georgia, serif;
    -webkit-transition: color 0.2s linear;
    -moz-transition: color 0.2s linear;
    -o-transition: color 0.2s linear;
    -ms-transition: color 0.2s linear;
    transition: color 0.2s linear;
}
#mh-menu li:hover span:nth-child(2){
    color: #fff;
}
#mh-menu li img{
    position: absolute;
    z-index: 1;
    left: 0px;
    top: 0px;
    opacity: 0;
    -webkit-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -moz-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -o-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    -ms-transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
    transition: left 0.4s ease-in-out, opacity 0.6s ease-in-out;
}
#mh-menu li:hover img{
    left: 300px;
    opacity: 1;
}
--></style>

Harmadik:
Főoldal Kódok Segítség Grafika

2014. május 7., szerda

Menükódok (1)

2 megjegyzés: