Forumda yenilikler devam etmektedir , çalışmalara devam ettiğimiz kısa süre içerisinde güzel bir görünüme sahip olduk daha iyisi için lütfen çalışmaların bitmesini bekleyiniz. Tıkla ve Git
x

HTML – CSS ile Dikey Açılır Menü Yapımı

Hoş geldin! vbasic tarafından topluluğumuza katılmaya davet edildiniz. Kaydolmak için lütfen burayı tıklayın.

admin

(¯´•._.• Webmaster •._.•´¯)
Yönetici
Modaratör
Katılım
Ara 27, 2022
Mesajlar
210
Etkileşim
3,939
Puan
0
Yaş
37
Konum
Adana
Web sitesi
forumdas.com.tr
F-D Coin
3,884
HTML sayfalarımızda CSS komutlarından yararlanarak dikey açılır menü oluşturma anlatılmıştır.


Kod:
<html>
    <head>
        <style type="text/css">
            ul,ol
            {
                list-style:none;
            }
            ol,ul,li
            {
                margin:0; padding:0;
            }
            .menu
            {
                width:200px;
            }
            .menu a
            {
                color:orange;
                text-decoration:none;
                display:block;
                line-height:25px;
                font-weight:bolder;
                padding-left:10px;
            }
            .menu a:hover
            {
                color:grey;
                background:orange;
            }
            .menu li
            {
                position:relative;
                background:grey;
            }
            .menu ul
            {
                display:none;
                position:absolute;
                left:200px;
                top:0px;
                width:200px;
            }
            .menu li:hover > ul
            {
                display:block;
            }
 
        </style>
    </head>
    
    <body>
        <ul class="menu">
            <li><a href="#">Ana Sayfa</a></li>
            <li><a href="#">Ürünler</a>
                <ul>
                    <li><a href="#">Kulübeler</a></li>
                    <li><a href="#">Mamalar</a>
                        <ul>
                            <li><a href="#">Köpek Maması</a></li>
                            <li><a href="#">Kedi Maması</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Referanslar</a></li>
            <li><a href="#">Albüm</a></li>
            <li><a href="#">İletişim</a></li>
        </ul>
    </body>
</html>
 

Similar threads

Less Ruby de geliştirilmiş ve zamanla Javascripte aktarılmış bir css preprocessor (css önişlemcisi) dir Less içinde fonksiyonları, değişkenleri, karıştırmaları(mixin), matematiksel hesapları barındıran ve css yazımında kod fazlalığının önüne geçen bir dinamik stil dosyasıdır Stilleri tüm...
Cevaplar
0
Görüntüleme
158
HTML öğretici kodu, renkli animasyonlu bir nesneyi bir açıklamayla gösteren bir örnektir: <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Hareketli Renkli Top</title> <style> #top { width: 100px; height: 100px; background-color...
Cevaplar
0
Görüntüleme
258
CSS Nedir? Cascading Style Sheets, kısaca CSS. Web tasarımın vazgeçilmezi haline gelmiş, webe estetik bir görünüm kazandırmayı amaçlayan bir tasarım dili. CSS Kim Tarafından Geliştirilmiştir? CSS, World Wide Web’in yaratıcısı, HTML’in geliştirilmesine katkı sağlayan ve İsviçre'deki CERN...
Cevaplar
0
Görüntüleme
305
HTML Nedir? Hypertext Markup Language kısaca HTML. Web tasarımların iskeleti haline gelmiş, statik bir yapı, peki hala öyle mi? Bu sorunun cevabına yazının devamında değineceğim. HTML Kim Tarafından Geliştirilmiştir? World Wide Web’in de yaratıcı olan İsviçre'deki CERN Araştırma Enstitüsünde...
Cevaplar
0
Görüntüleme
395
Merhabalar Simple Machines Forum sisteminde sitenizin görünüşünü etki eden en önemli dosya, tema klasörünün içinde bulunan, stylecss dosyasıdır Bu css dosyası ile forumunuzun görünümünde bir çok değişiklik yapabilir,kendi özgün temanızı oluşturabilirsini Şimdi bu dosyayı nasıl...
Cevaplar
0
Görüntüleme
1K
858,500Konular
982,385Mesajlar
32,977Kullanıcılar
spineless81Son üye
Üst Alt