Altın Konu HTML ve CSS Kullanarak Açılır Menü Oluşturma

KERİM ERBAY · 23 Kas 2023

HTML ve CSS Kullanarak Açılır Menü oluşturmayı öğreniyoruz . Gezinti çubuğundaki bağlantının üzerine geldiğinizde, bağlantıların üzerine gelindiğinde bir açılır menü gösterilir.

Bir gezinme çubuğu oluşturarak Açılır Menünün Yapısını oluşturmak için Html kullanıyoruz ve Açılır menüyü şekillendirmek için Css kullanıyoruz .

Yalnızca HTML ve CSS Kullanan Açılır Menü Proje Önizlemesi

Bir "açılır" menü, bir seçenekler listesine benzer ancak bir düğmenin veya başka bir öğenin içine gizlenmiştir. Kullanıcı butona tıkladığında açılır menü ortaya çıkar. Bu blog yazısında HTML ve JavaScript kullanılarak kenar çubuğu açılır menüsünün nasıl oluşturulacağı tartışılacaktır.

Kullanılan dil	HTML ve CSS
Dış bağlantı / Bağımlılıklar	HAYIR
duyarlı	Evet

Açılır Menü Html Kodu: -

HTML:

<body>
    <div id="container">
        <nav>
            <ul>
                <li><a href="#">Home</a></li>
                <li>
                    <a href="#">Web Design</a>
                    <ul>
                        <li><a href="#">Project</a></li>
                        <li><a href="#">Videos</a></li>
                        <li>
                            <a href="#">Tutorials</a>
                            <ul>
                                <li><a href="#">HTML/CSS</a></li>
                                <li><a href="#">Javascript</a></li>
                                <li>
                                    <a href="#">UI Trend</a>
                                    <ul>
                                        <li><a href="#">Neumorphism</a></li>
                                        <li><a href="#">Glassmorphism</a></li>
                                        <li><a href="#">Other UI</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>
                </li>
                <li><a href="#">Web development</a></li>
                <li><a href="#">CWR</a></li>
                <li><a href="#">Contact</a></li>
            </ul>
        </nav>
    </div>
    <h1>
        Go to google search codewithrandom and visit my website for source. code
        and 40+ frontend project available with complete code
    </h1>
</body>

Açılır menümüzün kapsayıcısı, id kapsayıcısına sahip div öğesi kullanılarak oluşturulacak ve içinde nav etiketi kullanılarak bir navbar bölümü oluşturulacaktır. Bu, açılır menümüzün yapısını ekleyecektir. İçerisindeki sırasız liste, liste öğesi ve bağlantı etiketleri kullanılarak bir açılır menü yapılacaktır. Sırasız liste, gezinme çubuğuna bağlantılar oluşturmak için kullanılacaktır.

Açılır menü için tüm Html Kodları mevcuttur. Artık çıktıyı Css olmadan görebiliyorsunuz, ardından Açılır Menümüz için CSS Kodunu yazıyoruz.

Yalnızca HTML Kodu Çıkışı: -

Yalnızca HTML ve CSS Kullanan Açılır Menü

Açılır Menü İçin CSS Kodu: -

CSS:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
    background: #ebf0f5;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap: break-word !important;
    font-family: "Open Sans", sans-serif;
}
a {
    color: #fff;
}
#container {
    margin: 0 auto;
}
nav {
    margin: 50px 0;
    background-color: #0f131f;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li {
    display: inline-block;
    background-color: #0f131f;
}
nav a {
    display: block;
    padding: 0 10px;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
}
nav a:hover {
    background-color: #5f5c5c;
}
nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
}
nav ul li:hover > ul {
    display: inherit;
}
nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}
nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
}
h1 {
    width: 670px;
    color: black;
    font-size: 1.4rem;
}
li > a:after {
    content: " +";
}
li > a:only-child:after {
    content: "";
}

Adım 1: Google içe aktarma bağlantısını kullanarak, önce açılır menümüze birkaç yeni yazı tipi stili ekleyeceğiz. Çalışmalarımıza iki yeni yazı tipi ailesi Open Sans ve Bree Brif eklenecek.

Artık gövde etiketi seçici kullanılarak arka plan açık maviye ayarlanacak ve yazı tipi yüksekliğini "22 piksel" olarak ayarlamak için yazı tipi boyutu özelliği kullanılacaktır. Line height özelliğini kullanarak 32 piksellik bir satır yüksekliği ekleyeceğiz ve yazı tipi rengini beyaz olarak ayarlayacağız.

Kod:

@import url(https://fonts.googleapis.com/css?family=Open+Sans);
@import url(https://fonts.googleapis.com/css?family=Bree+Serif);
body {
    background: #ebf0f5;
    font-size: 22px;
    line-height: 32px;
    color: #ffffff;
    word-wrap: break-word !important;
    font-family: "Open Sans", sans-serif;
}

Adım 2: Etiket tanımlayıcıyı (a,nav) kullanarak artık arka plan özelliğini “siyah”, kenar boşluğunu 5 opx ve rengi “beyaz” olarak ayarlayacağız. Ayrıca gezinme çubuğu etiket seçiciyi kullanarak kenar boşluğunu da ayarlayacağız.

“a” etiketi seçiciyi kullanarak, konumu inline blok olarak ayarladığımız açılır menümüz için ekranı “blok” ve yazı tipi yüksekliğini de 20 piksel olarak ayarlayacağız.

Ayrıca vurgulu özelliğini kullanarak, kullanıcı gezinme çubuğu bağlantısının üzerine geldiğinde, "Gri renk" simgesinin arka plan rengi değişirken bir fareyle üzerine gelme ekleyeceğiz.

HTML:

 {
    color: #fff;
}
#container {
    margin: 0 auto;
}
nav {
    margin: 50px 0;
    background-color: #0f131f;
}
nav ul {
    padding: 0;
    margin: 0;
    list-style: none;
    position: relative;
}
nav ul li {
    display: inline-block;
    background-color: #0f131f;
}
nav a {
    display: block;
    padding: 0 10px;
    color: #fff;
    font-size: 20px;
    line-height: 60px;
    text-decoration: none;
}
nav a:hover {
    background-color: #5f5c5c;
}
nav ul ul {
    display: none;
    position: absolute;
    top: 60px;
}
nav ul li:hover > ul {
    display: inherit;
}
nav ul ul li {
    width: 170px;
    float: none;
    display: list-item;
    position: relative;
}
nav ul ul ul li {
    position: relative;
    top: -60px;
    left: 170px;
}
h1 {
    width: 670px;
    color: black;
    font-size: 1.4rem;
}
li > a:after {
    content: " +";
}
li > a:only-child:after {
    content: "";
}

Artık Html ve Css Kodumuzu tamamladık