Buradasınız: 5 Çeşit Açılır Menü

5 Çeşit Açılır Menü



Bloglarda kullanabileceğiniz bir menü çeşidini burdaki yazımda sizlere vermiştim. Ancak bu yazımda toplu 5 çeşit hoş menü çeşitlerini sizlerle paylaşacağım.Tabii blogger da bu tür menüler kullanmak için blog etiketlerinizin belirli başlıklar altında sabit olması gerekiyor. Yoksa bir yazı ile yeni bir etiket oluşturduğunuzda bunu menüye sonradan eklemeniz kaçınılmaz olacak. Eğer yok benim etiketlerim belli başlı zaten, o etiketler altında yazıyorum diyorsanız, menü seçeneği etiketler için bulut ve benzerleri için daha güzel olacaktır.

Altta verdiğim menü çeşitlerinde kodları 3 renge ayırdım. Kodları eklerken lütfen şablon yedeğinizi alınız. Ayrıca ekte verdiğim dosyaları kodlar arasında ismi ile verilen yerlere eklemeyi unutmayınız.

Yerleşim--->HTML Düzenle---> diyoruz. Aşağıda verilen kodlar; kod1- kod2- kod3 olmak üzere 3 parçaya ayrılmıştır. Kod1 kısmını html bölümünde ctrl+f ile 
]]></b:skin>
kodunu aratıp bu kodun hemen üzerine yapıştırıyoruz. Kod2 kısmını 
]]></b:skin>
kodunun hemen altına yada
</head>
kodunun hemen üzerine yapıştırıyoruz. Daha sonra bir önizleme yaptıktan sonra eğer bir sorun yoksa kaydediyoruz. Sayfa Öğelerinden--->Gadget Ekle----> Html JavaScript diyerek verilen kod3 kısmında gerekli yerleri doldurduktan sonra yapıştırıp kaydediyoruz. Kolay gelsin.

Bullet List Accordion Menu

Mause'nin click olayı ile açılan menü. Resim dosyallarını ve js dosyalarını indirin.(Sağ tıkla- Farklı Kaydet)

http://i44.tinypic.com/246j893.png http://i43.tinypic.com/24dpxef.png http://i42.tinypic.com/2rmtz6c.png

ddaccordion.js








---------------------------KOD1------------------------------------

.arrowlistmenu{
width: 180px; /*width of accordion menu*/
}

.arrowlistmenu .menuheader{ /*CSS class for menu headers in general (expanding or not!)*/
font: bold 14px Arial;
color: white;
background: black url(titlebar.png) repeat-x center left;
margin-bottom: 10px; /*bottom spacing between header and rest of content*/
text-transform: uppercase;
padding: 4px 0 4px 10px; /*header text is indented 10px*/
cursor: hand;
cursor: pointer;
}

.arrowlistmenu .openheader{ /*CSS class to apply to expandable header when it's expanded*/
background-image: url(titlebar-active.png);
}

.arrowlistmenu ul{ /*CSS for UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
margin-bottom: 8px; /*bottom spacing between each UL and rest of content*/
}

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

.arrowlistmenu ul li a{
color: #A70303;
background: url(arrowbullet.png) no-repeat center left; /*custom bullet list image*/
display: block;
padding: 2px 0;
padding-left: 19px; /*link text is indented 19px*/
text-decoration: none;
font-weight: bold;
border-bottom: 1px solid #dadada;
font-size: 90%;
}

.arrowlistmenu ul li a:visited{
color: #A70303;
}

.arrowlistmenu ul li a:hover{ /*hover state CSS*/
color: #A70303;
background-color: #F3F3F3;
}

------------------------KOD2---------------------------------------------------



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">

<head>

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

</script>


<script type="text/javascript">


ddaccordion.init({
headerclass: "expandable", //Shared CSS class name of headers group that are expandable
contentclass: "categoryitems", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "openheader"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["prefix", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


</script>


------------------------KOD3-----------------------------------------------

<div class="arrowlistmenu">

<h3 class="menuheader expandable">CSS Library</h3>
<ul class="categoryitems">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Links & Buttons</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Other</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Browse All</a></li>
</ul>

<h3 class="menuheader expandable">CSS Drive</h3>
<ul class="categoryitems">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Gallery</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Menu Gallery</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Web Design News</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Examples</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Compressor</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Forums</a></li>
</ul>

<h3 class="menuheader expandable">JavaScript Kit</h3>
<ul class="categoryitems">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" >Free JavaScripts</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript tutorials</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript Reference</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DOM Reference</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DHTML & CSS</a></li>
</ul>

<h3 class="menuheader" style="cursor: default">FeedBack</h3>
<div>
Regular contents here. Header does not expand or contact.
</div>

</div>


Glossy Accordion Menu
Click olayı ile çalışan farklı bir menü;
Gerekenler; (Sağ tıkla- Farklı Kaydet)
http://i42.tinypic.com/i5zris.gif http://i42.tinypic.com/29fxana.gif plus --> http://i44.tinypic.com/2ihy15z.gif minus--> http://i44.tinypic.com/15s0g92.gif ddaccordion.js












-----------------KOD1------------------------

.glossymenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
border-bottom-width: 0;
}

.glossymenu a.menuitem{
background: black url(glossyback.gif) repeat-x bottom left;
font: bold 14px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 4px 0;
padding-left: 10px;
text-decoration: none;
}


.glossymenu a.menuitem:visited, .glossymenu .menuitem:active{
color: white;
}

.glossymenu a.menuitem .statusicon{ /*CSS for icon image that gets dynamically added to headers*/
position: absolute;
top: 5px;
right: 5px;
border: none;
}

.glossymenu a.menuitem:hover{
background-image: url(glossyback2.gif);
}

.glossymenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
}

.glossymenu div.submenu ul{ /*UL of each sub menu*/
list-style-type: none;
margin: 0;
padding: 0;
}

.glossymenu div.submenu ul li{
border-bottom: 1px solid blue;
}

.glossymenu div.submenu ul li a{
display: block;
font: normal 13px "Lucida Grande", "Trebuchet MS", Verdana, Helvetica, sans-serif;
color: black;
text-decoration: none;
padding: 2px 0;
padding-left: 10px;
}

.glossymenu div.submenu ul li a:hover{
background: #DFDCCB;
colorz: white;
}

-----------KOD2------------------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

</script>


<script type="text/javascript">


ddaccordion.init({
headerclass: "submenuheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "click", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", ""], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["suffix", "<img src='plus.gif' class='statusicon' />", "<img src='minus.gif' class='statusicon' />"], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


</script>



---------------------KOD3--------------------------------

<div class="glossymenu">
<a class="menuitem" href="http://BLOGUM.blogspot.com">HADİ pAYLAS</a>
<a class="menuitem submenuheader" href="#" >CSS Examples</a>
<div class="submenu">
<ul>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DIVs and containers</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Links & Buttons</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Other</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Browse All</a></li>
</ul>
</div>
<a class="menuitem" href="http://BLOGUM.blogspot.com">JavaScript Reference</a>
<a class="menuitem" href="http://BLOGUM.blogspot.com">DOM Reference</a>
<a class="menuitem submenuheader" href="http://BLOGUM.blogspot.com">CSS Drive</a>
<div class="submenu">
<ul>
<li><a href="http://BLOGUM.blogspot.com">CSS Gallery</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Menu Gallery</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Web Design News</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Examples</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Compressor</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Forums</a></li>
</ul>
<img src="http://i27.tinypic.com/sy7295.gif" style="margin: 10px 5px" />
</div>
<a class="menuitem" href="http://BLOGUM.blogspot.com" style="border-bottom-width: 0">Coding Forums</a>
</div>
HADİ pALAS bLOG fARKIYLA


Apple style Accordion Menu

Click olayı yoktur. Mause'yi üzerine götürmeniz yeterli, kendiliğinden açılıyor.
Gerekenler;

silvergradient: http://i42.tinypic.com/n16qme.gif silvergradientover: http://i43.tinypic.com/21j5fna.gif ddaccordion.js








----------------Kod1------------------------------------
.applemenu{
margin: 5px 0;
padding: 0;
width: 170px; /*width of menu*/
border: 1px solid #9A9A9A;
}

.applemenu div.silverheader a{
background: black url(
silvergradient.gif) repeat-x center left;
font: normal 12px Tahoma, "Lucida Grande", "Trebuchet MS", Helvetica, sans-serif;
color: white;
display: block;
position: relative; /*To help in the anchoring of the ".statusicon" icon image*/
width: auto;
padding: 5px 0;
padding-left: 8px;
text-decoration: none;
}


.applemenu div.silverheader a:visited, .applemenu div.silverheader a:active{
color: white;
}


.applemenu div.selected a, .applemenu div.silverheader a:hover{
background-image: url(silvergradientover.gif);
color: white;
}

.applemenu div.submenu{ /*DIV that contains each sub menu*/
background: white;
padding: 5px;
height: 300px; /*Height that applies to all sub menu DIVs. A good idea when headers are toggled via "mouseover" instead of "click"*/
}



---------------Kod2----------------------------

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="
ddaccordion.js">

</script>


<script type="text/javascript">


ddaccordion.init({
headerclass: "silverheader", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "fast", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})


</script>



----------------Kod3----------------------------

<div class="applemenu">
<div class="silverheader"><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Ana Sayfa</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" >CSS Examples</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript Kit</a></div>
<div class="submenu">
Some random content here<br />
</div>
<div class="silverheader"><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">CSS Drive</a></div>
<div class="submenu">
Some random content here<br />
<img src="http://i27.tinypic.com/sy7295.gif" />
</div>
<div class="silverheader"><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Coding Forums</a></div>
<div class="submenu">
Some random content here<br />
</div>
</div>


Urban Gray Accordion Menu

Click olayı yoktur. Mause'yi üzerine götürmeniz yeterli, kendiliğinden açılıyor.
Gerekenler;

arrowstop: http://i44.tinypic.com/21b50r6.gif ddaccordion.js











-------------kod1-----------------------
.urbangreymenu{
width: 190px; /*width of menu*/
}

.urbangreymenu .headerbar{
font: bold 13px Verdana;
color: white;
background: #606060 url(arrowstop.gif) 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*/
}

.urbangreymenu .headerbar a{
text-decoration: none;
color: white;
display: block;
}

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

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

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

.urbangreymenu ul li a:visited{
color: black;
}

.urbangreymenu ul li a:hover{ /*hover state CSS*/
color: white;
background: black;
}



---------------Kod2---------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

</script>

<script type="text/javascript">

ddaccordion.init({
headerclass: "headerbar", //Shared CSS class name of headers group
contentclass: "submenu", //Shared CSS class name of contents group
revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content
onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(headers, expandedindices){ //custom code to run when headers have initalized
//do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
//do nothing
}
})

</script>



-------------Kod3--------------------------------
<div class="urbangreymenu">

<h3 class="headerbar"><a href="#">CSS Library</a></h3>
<ul class="submenu">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DIVs and containers</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li>
<li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li>
</ul>

<h3 class="headerbar"><a href="#">JavaScript Kit</a></h3>
<ul class="submenu">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" >Free JavaScripts</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript tutorials</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript Reference</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DHTML & CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Web Design</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Free Java Applets</a></li>
</ul>

</div>





Arrow Side Menu

Click olayı ile çalışan farklı bir menü;
Gerekenler;

arrovgreen;
http://i43.tinypic.com/t4vlom.gif

ddaccordion.js









---------------Kod1----------------------------

.arrowsidemenu{
width: 180px; /*width of menu*/
border-style: solid solid none solid;
border-color: #94AA74;
border-size: 1px;
border-width: 1px;
}

.arrowsidemenu div a{ /*header bar links*/
font: bold 12px Verdana, Arial, Helvetica, sans-serif;
display: block;
background: transparent url(arrowgreen.gif) 100% 0;
height: 24px; /*Set to height of bg image-padding within link (ie: 32px - 4px - 4px)*/
padding: 4px 0 4px 10px;
line-height: 24px; /*Set line-height of bg image-padding within link (ie: 32px - 4px - 4px)*/
text-decoration: none;
}

.arrowsidemenu div a:link, .arrowsidemenu div a:visited{
color: #26370A;
}

.arrowsidemenu div a:hover{
background-position: 100% -32px;
}

.arrowsidemenu div.unselected a{ /*header that's currently not selected*/
color: #6F3700;
}


.arrowsidemenu div.selected a{ /*header that's currently selected*/
color: blue;
background-position: 100% -64px !important;
}

.arrowsidemenu ul{
list-style-type: none;
margin: 0;
padding: 0;
}

.arrowsidemenu ul li{
border-bottom: 1px solid #a1c67b;
}


.arrowsidemenu ul li a{ /*sub menu links*/
display: block;
font: normal 12px Verdana, Arial, Helvetica, sans-serif;
text-decoration: none;
color: black;
padding: 5px 0;
padding-left: 10px;
border-left: 10px double #a1c67b;
}

.arrowsidemenu ul li a:hover{
background: #d5e5c1;
}
-----------------kod2------------------------
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>

<script type="text/javascript" src="ddaccordion.js">

</script>

<script type="text/javascript">

//Initialize Arrow Side Menu:
ddaccordion.init({
headerclass: "menuheaders", //Shared CSS class name of headers group
contentclass: "menucontents", //Shared CSS class name of contents group
revealtype: "clickgo", //Reveal content when user clicks or onmouseover the header? Valid value: "click", or "mouseover"
mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover
collapseprev: true, //Collapse previous content (so only one open at any time)? true/false
defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc]. [] denotes no content.
onemustopen: false, //Specify whether at least one header should be open always (so never all headers closed)
animatedefault: false, //Should contents open by default be animated into view?
persiststate: true, //persist state of opened contents within browser session?
toggleclass: ["unselected", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"]
togglehtml: ["none", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively  ["position", "html1", "html2"] (see docs)
animatespeed: 500, //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow"
oninit:function(expandedindices){ //custom code to run when headers have initalized
   //do nothing
},
onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed
   //do nothing
}
})

</script>



----------------------------Kod3------------------------



<div class="arrowsidemenu">

<div><a href="http://www.dynamicdrive.com" title="Home">Home</a></div>
<div class="menuheaders"><a href="#" title="CSS">CSS Library</a></div>
<ul class="menucontents">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Horizontal CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Vertical CSS Menus</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Image CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Form CSS</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">DIVs and containers</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Links & Buttons</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Other</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Browse All</a></li>
</ul>
<div><a href="#" title="Forums">Forums</a></div>
<div class="menuheaders"><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" title="JavaScript">JavaScript</a></div>
<ul class="menucontents">
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">JavaScript Reference</a></li>
<li><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ">Free JavaScripts</a></li>
</ul>
<div><a href="http://BLOGUM.blogspot.com/search/label/ETİKET İSMİ" title="Tools">Webmaster Tools</a></div>

</div>
----------------------------------------------------
Hadi Paylas Blog


Etiketler:

1 yorum:

Çamur Abi on 5 Aralık 2011 10:51 dedi ki...

siten hoş benim blogada beklerim yorumlarla

http://www.domainsiz.net/

Yorum Gönder

Kaydol: Kayıt Yorumları (Atom)