Menü çalışmam

Başlatan DaHiLeaYSe, 22 Eyl 2015 19:27

« önceki - sonraki »

0 Üyeler ve 1 Ziyaretçi konuyu incelemekte.



  1. 632

  2. 251

Yeni bir menu editledim istediğiniz gibi kullanabilirsiniz.

<style type="text/css">

.mbw_menu{
width: 220px; /*width of menu*/
    margin-left:5px
        border:2px inset red;
    background:white;
}

.mbw_menu .headerbar{
font: bold 13px Verdana;
color: white;
background: red url() no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/
margin-bottom: 0; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 7px 0 7px 31px; /*31px is left indentation of header text*/
}

.mbw_menu ul{
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 0; /*bottom spacing between each UL and rest of content*/
}

.mbw_menu ul li{
padding-bottom: 2px; /*bottom spacing between menu items*/
}

.mbw_menu ul li a{
font: normal 12px Arial;
    font-weight: bold;
color: black,;
background: White;
display: block;
padding: 5px 0;
line-height: 17px;
padding-left: 8px; /*link text is indented 8px*/
text-decoration: none;
}

.mbw_menu ul li a:visited{
color: black;
    background:;
}

.mbw_menu ul li a:hover{ /*hover state CSS*/
color: white
background: gold;
    font-weight: bold;
}
.a_demo_four {
background-color:#3bb3e0;
font-family: 'Open Sans', sans-serif;
font-size:12px;
text-decoration:none;
color:black;
position:relative;
padding:10px 20px;
padding-right:50px;
background-image: linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -o-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -moz-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -ms-linear-gradient(bottom, rgb(44,160,202) 0%, rgb(62,184,229) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(44,160,202)),
color-stop(1, rgb(62,184,229))
);
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
-o-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 5px 0px 0px #156785, 0px 10px 5px #999;
}

.a_demo_four:active {
top:3px;
background-image: linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -o-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -moz-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -ms-linear-gradient(bottom, rgb(62,184,229) 0%, rgb(44,160,202) 100%);
background-image: -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(62,184,229)),
color-stop(1, rgb(44,160,202))
);
-webkit-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-moz-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
-o-box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
box-shadow: inset 0px 1px 0px #2ab7ec, 0px 2px 0px 0px #156785, 0px 5px 3px #999;
}

.a_demo_four::before {
background-color:#2591b4;
background-image:url('/images/right_arrow.png');
background-repeat:no-repeat;
background-position:center center;
content:"";
width:20px;
height:20px;
position:absolute;
right:15px;
top:50%;
margin-top:-9px;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
-webkit-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-moz-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
-o-box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
box-shadow: inset 0px 1px 0px #052756, 0px 1px 0px #60c9f0;
}

.a_demo_four:active::before {
top:50%;
margin-top:-12px;
-webkit-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
-moz-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
-o-box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
box-shadow: inset 0px 1px 0px #60c9f0, 0px 3px 0px #0e3871, 0px 6px 3px #1a80a6;
}

</style>
<b><br><br>
<div class="mbw_menu" style="width:215px;border:2px inset red;">
<h3 class="headerbar" style="background:red;">Kitaplar</h3>
    <img src="http://img9.imageshack.us/img9/5016/kitaplar.png" width="205px" height="174px">

<ul>
<li><a href="/harry-potter-ve-felsefe-tasi-kitap.html"class="a_demo_four">Felsefe Taşı</a></li>
<li><a href="/harry-potter-ve-sirlar-odasi-kitap.html" class="a_demo_four">Sırlar Odası</a></li>
<li><a href="/harry-potter-ve-azkaban-tutsagi-kitap.html" class="a_demo_four">Azbakan Tutsağı</a></li>
<li><a href="/harry-potter-ve-ates-kadehi-kitap.html" class="a_demo_four">Ateş Kadehi</a></li>
<li><a href="/harry-potter-ve-zumruduanka-yoldasligi-kitap.html" class="a_demo_four">Zümrüdüanka Yoldaşlığı</a></li>
    <li><a href="/harry-potter-ve-melez-prens-kitap.html" class="a_demo_four">Melez Prens</a></li>
<li><a href="/harry-potter-ve-olum-yadigarlari-kitap.html" class="a_demo_four">Ölüm Yadigarları</a></li>

</ul>


</div><br>
<div class="mbw_menu" style="width:215px;border:2px inset red;">
<h3 class="headerbar" style="background:red;">Filmler</h3>
    <img src="http://img402.imageshack.us/img402/8940/filmler.png" width="205px" height="174px">
<ul>
<li><a href="harry-potter-ve-felsefe-tasi-film.html"class="a_demo_four">Felsefe Taşı</a></li>
<li><a href="/harry-potter-ve-sirlar-odasi-film.html" class="a_demo_four">Sırlar Odası</a></li>
<li><a href="/harry-potter-ve-azkaban-tutsagi-film.html" class="a_demo_four">Azbakan Tutsağı</a></li>
<li><a href="/harry-potter-ve-ates-kadehi-film.html" class="a_demo_four">Ateş Kadehi</a></li>
<li><a href="/harry-potter-ve-zumruduanka-yoldasligi-film.html" class="a_demo_four">Zümrüdüanka Yoldaşlığı</a></li>
    <li><a href="/harry-potter-ve-melez-prens-film.html" class="a_demo_four">Melez Prens</a></li>
<li><a href="/harry-potter-ve-olum-yadigarlari-bolum-1-film.html" class="a_demo_four">Ölüm Yadigarları Bölüm 1</a></li>
<li><a href="/harry-potter-ve-olum-yadigarlari-bolum-2-film.html" class="a_demo_four">Ölüm Yadigarları Bölüm 2</a></li>
</ul>

</div>

Demo

http://tr.hogwartsturkiye.com/demom.html

*

  1. 1,181

  2. 117

  3. 390
Emeğine sağlık şöyle resim ekleyek her ihtimale karşı.




  1. 632

  2. 251
Cok zor geldi bende html dosya yaptim :D



  1. 632

  2. 251

Emeğinize sağlık güzel görünüyor.



  1. 632

  2. 251
Alıntı yapılan: gercek53 - 24 Eyl 2015 03:56Emeğinize sağlık güzel görünüyor.

Teşekkürler


MENU ×