rss

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

Yazar: EfsaneFenerli | Posted in

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">DersPHP.BlogSpoT.CoM</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>
DersPHP


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





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

Kaynak: DersPHP.BlogSpoT.CoM
Alıntı Yaparken Kaynak Belirtirmelisiniz.


Kaynak:DersPHP.BlogSpoT.CoM AlıntıYaparkenKaynakBelirtirmelisiniz.Copyright ©

Bu yazı Çarşamba, Haziran 03, 2009 tarihinde yayınlandı. Etiketler: . Yazılarımı RSS 2.0 dan besleyebilirsiniz. İsterseniz bir yorum bırakabilirsiniz..

0 yorum yapıldı: "Blogger 5 Çeşit Açılır Menü Yapımı"

Sen de bir yorum yap...

Yorum Göndermek için mesaj yazmanız Yeterlidir.