bildirgec.org

jquery begining hakkında tüm yazılar

3 Adımda jQuery Sexy DropDown Menu

rhymes | 11 January 2010 19:57

Çoğu çalışmalarımızda gerekli olan DropDown menü jQuery ile dahada basit hale gelmiştir. 3 adımda aşağıdaki örnekteki gibi yapabilirsiniz. İşinize yarayacağını düşünüyorum.

Adım 1 : HTML
HTML tagları ile menümüzün başlıklarını oluşturuyoruz.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
 
<ul class="topnav">

    <li><a href="#">Home</a></li>

    <li>

        <a href="#">Tutorials</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li>

        <a href="#">Resources</a>

        <ul class="subnav">

            <li><a href="#">Sub Nav Link</a></li>

            <li><a href="#">Sub Nav Link</a></li>

        </ul>

    </li>

    <li><a href="#">About Us</a></li>

    <li><a href="#">Advertise</a></li>

    <li><a href="#">Submit</a></li>

    <li><a href="#">Contact Us</a></li>

</ul>

jQuery’e ile akordian menu yapalım

vectro | 06 July 2009 10:12

Merhabalar yine bir jquery dökümanı ile burdayım, her ne kadar kısa olsa da jQuery’ye başlamayaı düşünenler, gözü korkanlar, yada ufakdan bişeyler denemek isteyenler için faydalı bir yazı olacak.

Bu yazıda gerçekten jquery felsefesine çok güzel uyan bir örnek yapacağız.
The Write Less, Do More deyip başlıyoruz. klasik açılıp kapanan içerik yapacağız bunun bir çok örneği var ama 4 satırlık kod için niye hazır kullanalım ki 🙂 ben de bu kadar kolay olacağını beklemezdim açıkcası.

neyse bir içerik bir de head sınıfımız var. 3 tane div ile bir örnek deneyecğiz.
sınıflarımız burada.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
 
body,td,th {

	font-family: Arial, Helvetica, sans-serif;

	font-size: 9px;

	color: #333333;

}



.header

{

width:530px;

padding:5px;

height:20px;

cursor:pointer;

font-size:12px;

font-weight:bold;

border:1px solid #CCCCCC;

background-color:#FFFFCC;

background:url(pop_02.jpg);

}



.content

{

width:500px;

padding:20px 20px 20px 20px;

height:150px;

display:none;

border:1px solid #CCCCCC;

background-color:#FFFFCC;

background:#E4EEF1;

}