C-Sti̇l Şablonu (CSS) Menü İşlemleri̇

11.
STIL ABLONU (CSS) MEN LEMLER
Bu blm bitirdiinizde, Sekmeli mennn nasl yapldn, Dikey mennn nasl yapldn, Yatay mennn nasl yapldn, Dikey alr mennn nasl yapldn, Yatay mennn mennn nasl yapldn, Resimli mennn nasl yapldn,
renmi olacaksnz.
11.1 Sekmeli(Tab) men yapm

Sekmeli (tab) men yapabilmek iin CSS zellikleri ve list HTML esi birarada kullanlabilir. Li zellii aslnda ierisinde bulunan metni blok olarak gstermektedir. Display inline zellii kullanlarak bu blok olma zellii ortadan kaldrlr. Aadaki rnekte display zellii inline seenei ile beraber kullanlarak men balklarnn tek bir satrda yer almas salanmtr (ekil 29). <HTML> <HEAD> <TITLE>SEKMELI (TAB) MEN</TITLE> <STYLE TYPE="TEXT/CSS"> .TAB{ PADDING: 3px 0; MARGIN-LEFT: 0; FONT: BOLD 12px VERDANA; BORDER-BOTTOM: 1px SOLID GRAY; LIST-STYLE-TYPE: NONE; TEXT-ALIGN: LEFT; /*MENNN KONUMUNU SOLA, ORTAYA VEYA SAA HIZALANABILIR*/ } .TAB LI{ DISPLAY: INLINE; MARGIN: 0; } .TAB LI A{ TEXT-DECORATION: NONE; PADDING: 3px 7px; MARGIN-RIGHT: 3px; BORDER: 1px SOLID GRAY; BORDER-BOTTOM: NONE; BACKGROUND-COLOR: #F6FFD5; COLOR: #2D2B2B; } .TAB LI A:VISITED{ COLOR: #2D2B2B; } .TAB LI A:HOVER{ BACKGROUND-COLOR: #DBFF6C; COLOR: BLACK; } .TAB LI A:ACTIVE{ COLOR: BLACK; } .TAB LI.SECILEN A{ /*SEILEN TABA EFEKT VERILMESI*/ POSITION: RELATIVE; TOP: 1px; PADDING-TOP: 4px; BACKGROUND-COLOR: #DBFF6C; COLOR: BLACK; } </STYLE> <UL CLASS="TAB"> <LI CLASS="SECILEN"><A HREF="#">ANA SAYFA</A></LI> <LI><A HREF="#">HAKKIMDA</A></LI> <LI><A HREF="#">YARDIM</A></LI> <LI><A HREF="#">ILETIIM</A></LI> </UL> </BODY> </HTML>
ekil 1 Sekme men
11.2 Dikey men yapm

Dikey men yapabilmek iin CSS zellikleri ve <a> HTML esi birarada kullanlabilir. Aadaki rnekte display zelliine block deeri verilerek tm arka plann tklanabilir olmas salanmtr (ekil 30). <HTML> <HEAD> <TITLE>DIKEY MEN</TITLE> <STYLE TYPE="TEXT/CSS"> UL { FONT: BOLD 12px VERDANA; LIST-STYLE-TYPE:NONE; MARGIN:0; PADDING:0; } A { DISPLAY:BLOCK; WIDTH:70px; BACKGROUND-COLOR:#DDDDDD; } </STYLE> </HEAD> <BODY> <UL> <LI><A HREF="#">ANA SAYFA</A></LI> <LI><A HREF="#">HAKKIMDA</A></LI> <LI><A HREF="#">YARDIM</A></LI> <LI><A HREF="#">ILETIIM</A></LI> </UL> <P>MEN ARKASINA EKLENEN ALANIN TAMAMI TIKLANABILIR.</P> <P>DISPLAY BLOCK ZELLII BU TM ALANIN TIKLANABILIR OLMASINI SALIYOR.</P> </BODY> </HTML>
ekil 2 Dikey men
11.3 Yatay men yapm

CSS ile yatay men yapmann iki yntemi bulunmaktadr. Birincisi sekmeli menye benzer yntem olan inline (tek sra) men dieri ise floating (kayan) mendr. Her iki men de liste zellii ile yaplabilmektedir. Inline (tek sra) men Aadaki tek sra men display zelliine inline deeri verilerek standart bir men yaplmtr (ekil 31). <HTML> <HEAD> <TITLE>TEK SIRA (INLINE) MEN</TITLE> <STYLE TYPE="TEXT/CSS"> UL { FONT: BOLD 12px VERDANA; LIST-STYLE-TYPE:NONE; MARGIN:0; PADDING:0; } LI { DISPLAY:INLINE; } </STYLE> </HEAD> <BODY> <UL> <LI><A HREF="#">ANA SAYFA</A></LI> <LI><A HREF="#">HAKKIMDA</A></LI> <LI><A HREF="#">YARDIM</A></LI> <LI><A HREF="#">ILETIIM</A></LI> </UL> </BODY> </HTML>
ekil 3 Tek sra men
Floating (kayan) men Aadaki kayan men rneinde float:left zellii kullanlarak tarayc penceresi kld men balklarnn sola kaymas salanmtr (ekil 32-33). Display: block zellii ile yine tm alanlarn tklanabilir olmas salanmtr. <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 TRANSITIONAL//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-TRANSITIONAL.DTD"> <HTML> <HEAD> <TITLE>KAYAN (FLOATING) MEN</TITLE> <STYLE TYPE="TEXT/CSS"> UL { FONT: BOLD 12px VERDANA; LIST-STYLE-TYPE:NONE; MARGIN:0; PADDING:0; OVERFLOW:HIDDEN; } LI { FLOAT:LEFT; } A { DISPLAY:BLOCK; WIDTH:80px; BACKGROUND-COLOR:#DDDDDD; } </STYLE> </HEAD>
<BODY> <UL> <LI><A HREF="#">ANA SAYFA</A></LI> <LI><A HREF="#">HAKKIMDA</A></LI> <LI><A HREF="#">YARDIM</A></LI> <LI><A HREF="#">ILETIIM</A></LI> </UL> </BODY> </HTML>
ekil 4 Kayan men ekil 5 Kayan men -2
11.4 Dikey alr men

Aadaki rmekte fare hareketlerinin alglanmas iin Javascript kodlar kullanlmtr. Fare men balna gelince alt menlerinin grnmesi salanm, fare men balndan ayrlnca da alt menlerinin gizlenmesi salanmtr (ekil 34). <HTML> <HEAD> <STYLE> UL { MARGIN: 0; PADDING: 0; LIST-STYLE: NONE; WIDTH: 150px; } UL LI { POSITION: RELATIVE; }
LI UL { POSITION: ABSOLUTE; LEFT: 149px; TOP: 0; DISPLAY: NONE; } UL LI A { DISPLAY: BLOCK; TEXT-DECORATION: NONE; BACKGROUND-COLOR: #E2E2E2; PADDING: 5px; BORDER-BOTTOM:0; } LI:HOVER UL, LI.OVER UL { DISPLAY: BLOCK; } </STYLE> <SCRIPT TYPE="TEXT/JAVASCRIPT"> STARTLIST = FUNCTION() { IF (DOCUMENT.ALL&&DOCUMENT.GETELemENTBYID) { NAVROOT = DOCUMENT.GETELemENTBYID("MENU"); FOR (I=0; I<NAVROOT.CHILDNODES.LENGTH; I++) { NODE = NAVROOT.CHILDNODES[I]; IF (NODE.NODENAME=="LI") { NODE.ONMOUSEOVER=FUNCTION() { THIS.CLASSNAME+=" OVER"; } NODE.ONMOUSEOUT=FUNCTION() { THIS.CLASSNAME=THIS.CLASSNAME.REPLACE(" OVER", ""); } } } } } WINDOW.ONLOAD=STARTLIST; </SCRIPT> </HEAD> <BODY> <UL ID="MENU">
<LI><A HREF="#">OKULLAR</A> <UL> <LI><A HREF="#">DEVLET OKULLARI</A></LI> <LI><A HREF="#">ZEL OKULLAR </A></LI> </UL> </LI> <LI><A HREF="#">NIVERSITELER</A> <UL> <LI><A HREF="#">DEVLET NIVERSITELERI</A></LI> <LI><A HREF="#">ZEL NIVERSITELER</A></LI> </UL> </LI> </UL> </BODY></HTML>
ekil 6 Dikey alr men
11.5 Yatay alr men

Aadaki rmekte fare hareketlerinin alglanmas iin Javascript kodlar kullanlmtr. Fare men balna gelince alt menlerinin grnmesi salanm, fare men balndan ayrlnca da alt menlerinin gizlenmesi salanmtr (ekil 35).
<HTML> <HEAD> <STYLE> BODY{FONT-FAMLY:ARAL;} TABLE{FONTSZE:80%;BACKGROUND:BLACK} A{COLOR:BLACK;TEXTDECORATON:NONE;FONT:BOLD} A:HOVER{COLOR:#606060} TD.MENU{BACKGROUND:LGHTBLUE} TABLE.MENU { FONT-SZE:100%; POSTON:ABSOLUTE; VSBLTY:HDDEN; } </STYLE> <SCRPT TYPE="TEXT/JAVASCRPT"> FUNCTON SHOWMENU(ELMNT) { DOCUMENT.GETELEMENTBYID(ELMN T).STYLE.VSBLTY="VSBLE";
} FUNCTON HDEMENU(ELMNT) { DOCUMENT.GETELEMENTBYID(ELMN T).STYLE.VSBLTY="HDDEN"; } </SCRPT> </HEAD> <BODY> <H3>YATAY AILIR MEN</H3> <TABLE WDTH="100%"> <TR BGCOLOR="#FF8080"> <TD ONMOUSEOVER="SHOWMENU('OKULL AR')" ONMOUSEOUT="HDEMENU('OKULLAR ')"> <A HREF="#">OKULLAR</A><BR /> <TABLE CLASS="MENU" D="OKULLAR" WDTH="120"> <TR><TD CLASS="MENU"><A HREF="#">DEVLET OKULLARI</A></TD></TR> <TR><TD CLASS="MENU"><A HREF="#">ZEL OKULLAR</A></TD></TR> </TABLE>
</TD> <TD ONMOUSEOVER="SHOWMENU('NVE RSTELER')" ONMOUSEOUT="HDEMENU('NVERS TELER')"> <A HREF="#">NVERSTELER</A><BR /> <TABLE CLASS="MENU" D="NVERSTELER" WDTH="120"> <TR><TD CLASS="MENU"><A HREF="#">DEVLET OKULLARI</A></TD></TR> <TR><TD CLASS="MENU"><A HREF="#">ZEL OKULLAR</A></TD></TR> </TABLE> </TD> </TABLE> </TD> </TR> </TABLE><BR><BR> <P>FARE MEN BALIKLARI ZERINE GELINCE ALT MENLER GZKECEKTIR.</P> </BODY> </HTML>
ekil 7 Yatay alr men
11.6 Resimli menler

Resimlere link ekleyip men olarak kullanmak olanakldr. Aada resimleri list zellii ile beraber kullanarak oluturulmu bir men bulunmaktadr (ekil 36). <!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 STRICT//EN" "HTTP://WWW.W3.ORG/TR/XHTML1/DTD/XHTML1-STRICT.DTD"> <HTML> <HEAD> <STYLE TYPE="TEXT/CSS"> #NAVLIST{POSITION:RELATIVE;} #NAVLIST LI{MARGIN:0;PADDING:0;LISTSTYLE:NONE;POSITION:ABSOLUTE;TOP:0;} #NAVLIST LI, #NAVLIST A{HEIGHT:44px;DISPLAY:BLOCK;} #HOME{LEFT:0px;WIDTH:46px;} #HOME{BACKGROUND:URL('home.gif') 0 0;} #PREV{LEFT:63px;WIDTH:43px;} #PREV{BACKGROUND:URL('back.gif') -47px 0;} #NEXT{LEFT:129px;WIDTH:43px;} #NEXT{BACKGROUND:URL('next.gif') -91px 0;} </STYLE> </HEAD> <BODY> <UL ID="NAVLIST"> <LI ID="HOME"><A HREF="#"></A></LI> <LI ID="PREV"><A HREF="#"></A></LI> <LI ID="NEXT"><A HREF="#"></A></LI> </UL> </BODY> </HTML>
ekil 36 Resimli men 1

C-Sti̇l Şablonu (CSS) Menü İşlemleri̇

Uploaded by

Document Information

Original Title

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

C-Sti̇l Şablonu (CSS) Menü İşlemleri̇

Uploaded by

Copyright:

Available Formats

11.

STIL ABLONU (CSS) MEN LEMLER

11.1 Sekmeli(Tab) men yapm

ekil 1 Sekme men

11.2 Dikey men yapm

ekil 2 Dikey men

11.3 Yatay men yapm

ekil 3 Tek sra men

ekil 4 Kayan men ekil 5 Kayan men -2

11.4 Dikey alr men

ekil 6 Dikey alr men

11.5 Yatay alr men

ekil 7 Yatay alr men

11.6 Resimli menler

ekil 36 Resimli men 1

You might also like