v2.5.2
Giriş yap

CSS ile 90 derece menü yapmak

rufiqcavadov
342 defa görüntülendi
1

Merhabalar. CSS ile 90 derece menü yapmak istiyorum fakat şu şekilde sağ köşede boşluk kalılyor. Ayrıca flex yapısı kullanarak yapıyorum 1-2 gündür öğrendiğim CSS flex yapısı ile yapıyorum bu arada. Kodlarda hata var mı yok mu Siz de bakın lütfen.

* {
    margin: 0;
    padding: 0;
}
html,body {
    height: 100%;
}
.side-menu {
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: absolute;
    right: 0;
}
.side-menu ul {
    display: flex;
    align-items: center;
    justify-content: center;
    transform: rotate(-90deg);
}
.side-menu ul li {
    font-size: 24px;
    padding: 0 15px;
}

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="side-menu">
        <ul>
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    About us
                </a>
            </li>
            <li>
                <a href="#">
                    Contact us
                </a>
            </li>
        </ul>
    </div>
</body>
</html>
css
Cevap yaz
Cevaplar (1)
munzevi
730 gün önce

verdiğin açıyla birlikte divin yönüde değişiyor, bu yüzden genişlik artıyor ve sende genişliğe göre ortalığın için en fazla o kadar sağ gidiyor.

<style>
* {
    margin: 0;
    padding: 0;
}
html,body {
    height: 100%;
}
.side-menu {
    height: 100%;
    display: flex;
    position: relative;
    align-items: center;   
}
.side-menu ul {
    right: 0;
    position: absolute;
    display: flex;
    transform: rotate(-90deg);
}
.side-menu ul li {
    font-size: 24px;
    padding: 0 15px;
}
</style>
    <div class="side-menu">
        <ul>
            <li>
                <a href="#">
                    Home
                </a>
            </li>
            <li>
                <a href="#">
                    About us
                </a>
            </li>
            <li>
                <a href="#">
                    Contact us
                </a>
            </li>
        </ul>
    </div>

bir miktar uğraştım, yukarıdaki sonuç doğru yaklaşıma daha yakın bir sonuç veriyor. en azından divin yönü döndüğünde derinlik döndürmüyor. right için negatif değer verebilirsin ama, bu da doğru kullanım değil gibi geliyor. oldum olası sevemedim şu css işlerini, yinede bakmak istedim.

0
#009698