Rotating Navigation Örneği

Bu yazımızda, HTML, CSS ve JavaScript kullanarak rotating navigation örneği oluşturacağız. Bu örnek ile şu konuları pekiştireceğiz:

☑️ Temel HTML kullanımı
- İçinde bir dönen navigasyon menüsü olan responsif bir web sayfası olan projemizin HTML kısmı sayfanın iskeletini oluşturur. İçinde, sayfa başlığı, dönen butonlar, içerik ve gezinme bölümü bulunmaktadır. Font Awesome ikonları kullanarak menüde görsel efekt sağlanmaktadır.
☑️ CSS ile sayfanın stilini ve düzenini sağlamayı
- Bu bölüm, sayfanın renklerini, yazı tiplerini, butonların görünümünü ve sayfanın dönen navigasyon menüsü için animasyonları stilledik. İçinde, sayfanın dönme efekti, butonların dönme efekti ve menü öğelerinin animasyonları bulunmaktadır.
☑️ JavaScript ile işlevselliğin nasıl sağlandığını
- Sayfadaki etkileşimi ve animasyonları kontrol etmeyi JavaScript ile sağladık. İçinde, açma ve kapatma butonlarının tıklanarak sayfanın dönen navigasyon menüsünü açma ve kapatma işlemleri yapılmaktadır.

Projemiz, dönen navigasyon menüsü olan responsif bir web sayfası tasarlamayı içermektedir. Projenin işleyişini CodePen üzerinden inceleyebilirsiniz:

See the Pen Rotating Navigation by 1kodum (@1kodum) on CodePen.

⭐ HTML kodu

<!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">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css" integrity="sha512-iecdLmaskl7CVkqkXNQ/ZH/XLlvWZOJyj7Yy7tcenmpD1ypASozpmT/E0iPtmFIB46ZmdtAc9eNBvH0H/ZpiBw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="style.css">
<title>Rotating Navigation</title>
</head>
<body>
<div class="container">
<div class="circle-container">
<div class="circle">
<button id="close">
<i class="fas fa-times"></i>
</button>
<button id="open">
<i class="fas fa-bars"></i>
</button>
</div>
</div>
<div class="content">
<h1>Why is Gamora?</h1>
<small>Drax</small>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident doloribus, sit laudantium reiciendis enim ipsa aliquid dolorem asperiores numquam qui explicabo rem praesentium, debitis doloremque possimus. Quisquam ratione dicta voluptas assumenda aut odit quam dolores nihil incidunt culpa ut rerum, saepe fuga vitae ipsum iste possimus ex. A, ratione. Mollitia dolorum cumque magnam officiis illum minus quia, a unde! Veniam sunt cumque in amet incidunt repudiandae animi repellat libero eos ipsam? Suscipit libero sequi obcaecati quos id, maiores fugit perspiciatis neque explicabo ea accusantium nobis tempore necessitatibus, corrupti nisi harum molestiae atque praesentium error deleniti sit laborum provident odio!</p>
<h3>Gamora</h3>
<img src="https://upload.wikimedia.org/wikipedia/en/thumb/5/54/Zoe_Saldana_as_Gamora.jpeg/220px-Zoe_Saldana_as_Gamora.jpeg" alt="gamora">
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quas officiis ratione perferendis deserunt minima sit veniam obcaecati fugiat laborum. Accusantium distinctio atque eos iste dicta amet! Hic ullam vitae itaque blanditiis minus eveniet delectus. Debitis et maiores nostrum sint modi odit, adipisci hic ducimus exercitationem, quidem voluptate commodi quo?</p>
</div>
</div>
<nav>
<ul>
<li><i class="fas fa-home"></i> Home</li>
<li><i class="fas fa-user-alt"></i> About</li>
<li><i class="fas fa-envelope"></i> Contact</li>
</ul>
</nav>
<script src="script.js"></script>
</body>
</html>

<!DOCTYPE html>

<head>

<title>Rotating Navigation</title>

</head>

<body>

</button>

</button>

</div>

<h1>Why is Gamora?</h1>

<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Temporibus provident doloribus, sit laudantium reiciendis enim ipsa aliquid dolorem asperiores numquam qui explicabo rem praesentium, debitis doloremque possimus. Quisquam ratione dicta voluptas assumenda aut odit quam dolores nihil incidunt culpa ut rerum, saepe fuga vitae ipsum iste possimus ex. A, ratione. Mollitia dolorum cumque magnam officiis illum minus quia, a unde! Veniam sunt cumque in amet incidunt repudiandae animi repellat libero eos ipsam? Suscipit libero sequi obcaecati quos id, maiores fugit perspiciatis neque explicabo ea accusantium nobis tempore necessitatibus, corrupti nisi harum molestiae atque praesentium error deleniti sit laborum provident odio!</p>

<h3>Gamora</h3>

<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Velit quas officiis ratione perferendis deserunt minima sit veniam obcaecati fugiat laborum. Accusantium distinctio atque eos iste dicta amet! Hic ullam vitae itaque blanditiis minus eveniet delectus. Debitis et maiores nostrum sint modi odit, adipisci hic ducimus exercitationem, quidem voluptate commodi quo?</p>

</div>

<nav>

<ul>

<li><i class="fas fa-user-alt"></i> About</li>

<li><i class="fas fa-envelope"></i> Contact</li>

</ul>

</nav>

</body>

</html>

⭐ CSS kodu

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");
* {
box-sizing: border-box;
}
body {
font-family: "Roboto", sans-serif;
background-color: #333;
color: #222;
overflow-x: hidden;
margin: 0;
}
.container {
background-color: #fafafa;
transform-origin: top left;
transition: transform 0.5s linear;
width: 100vw;
min-height: 100vh;
padding: 50px;
}
.container.show-nav {
transform: rotate(-20deg);
}
.circle-container {
position: fixed;
top: -100px;
left: -100px;
}
.circle {
background-color: #ff7979;
height: 200px;
width: 200px;
border-radius: 50%;
position: relative;
transition: transform 0.5s linear;
}
.container.show-nav .circle {
transform: rotate(-70deg);
}
.circle button {
position: absolute;
top: 50%;
left: 50%;
height: 100px;
background: transparent;
border: 0;
font-size: 26px;
color: #fff;
cursor: pointer;
}
.circle button:focus {
outline: none;
}
.circle button#open {
left: 60%;
}
.circle button#close {
top: 60%;
transform: rotate(90deg);
transform-origin: top left;
}
.container.show-nav + nav li {
transform: translateX(0);
transition-delay: .3s;
}
nav {
position: fixed;
bottom: 40px;
left: 0;
z-index: 100;
}
nav ul {
list-style-type: none;
padding-left: 30px;
}
nav ul li {
text-transform: uppercase;
color: #fff;
margin: 40px 0;
transform: translateX(-100%);
transition: transform 0.4s ease-in;
}
nav ul li i {
font-size: 20px;
margin-right: 10px;
}
nav ul li + li {
margin-left: 15px;
transform: translateX(-150%);
}
nav ul li + li + li {
margin-left: 30px;
transform: translateX(-200%);
}
.content img {
max-width: 100%;
}
.content {
max-width: 1000px;
margin: 50px auto;
}
.content h1 {
margin: 0;
}
.content small {
color: #555;
font-style: italic;
}
.content p {
color: #333;
line-height: 1.5;
}

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

@import url("https://fonts.googleapis.com/css2?family=Roboto&display=swap");

* {

box-sizing: border-box;

}

body {

font-family: "Roboto", sans-serif;

background-color: #333;

color: #222;

overflow-x: hidden;

margin: 0;

}

.container {

background-color: #fafafa;

transform-origin: top left;

transition: transform 0.5s linear;

width: 100vw;

min-height: 100vh;

padding: 50px;

}

.container.show-nav {

transform: rotate(-20deg);

}

.circle-container {

position: fixed;

top: -100px;

left: -100px;

}

.circle {

background-color: #ff7979;

height: 200px;

width: 200px;

border-radius: 50%;

position: relative;

transition: transform 0.5s linear;

}

.container.show-nav .circle {

transform: rotate(-70deg);

}

.circle button {

position: absolute;

top: 50%;

left: 50%;

height: 100px;

background: transparent;

border: 0;

font-size: 26px;

color: #fff;

cursor: pointer;

}

.circle button:focus {

outline: none;

}

.circle button#open {

left: 60%;

}

.circle button#close {

top: 60%;

transform: rotate(90deg);

transform-origin: top left;

}

.container.show-nav + nav li {

transform: translateX(0);

transition-delay: .3s;

}

nav {

position: fixed;

bottom: 40px;

left: 0;

z-index: 100;

}

nav ul {

list-style-type: none;

padding-left: 30px;

}

nav ul li {

text-transform: uppercase;

color: #fff;

margin: 40px 0;

transform: translateX(-100%);

transition: transform 0.4s ease-in;

}

nav ul li i {

font-size: 20px;

margin-right: 10px;

}

nav ul li + li {

margin-left: 15px;

transform: translateX(-150%);

}

nav ul li + li + li {

margin-left: 30px;

transform: translateX(-200%);

}

.content img {

max-width: 100%;

}

.content {

max-width: 1000px;

margin: 50px auto;

}

.content h1 {

margin: 0;

}

.content small {

color: #555;

font-style: italic;

}

.content p {

color: #333;

line-height: 1.5;

}

Genel stiller:
- Google Fonts’tan “Roboto” yazı tipi içe aktarılır ve tüm sayfa için kullanılır.
- * seçici ile tüm elemanların box-sizing özelliği “border-box” olarak ayarlanır. Bu, eleman boyutlarının padding ve border’ı içerecek şekilde hesaplanmasını sağlar.
- body etiketi, yazı tipi, arka plan rengi, metin rengi ve diğer bazı özellikler ile ilgili genel stil tanımlarına sahiptir.
.container ve dönen navigasyon:
- .container sınıfı, sayfanın ana içeriği için arka plan rengini, boyutunu ve döndürme animasyonunu tanımlar.
- .container.show-nav sınıfı, navigasyonun açık olduğu durumda sayfanın dönme açısını tanımlar.
- .circle-container ve .circle sınıfları, dönen düğmelerin stilini ve konumunu tanımlar.
- .container.show-nav .circle seçicisi, navigasyonun açık olduğunda dönen düğmenin dönme açısını tanımlar.
Düğme stilleri:
- .circle button seçicisi, dönen düğmelerin pozisyonunu, boyutlarını, arka planını ve metin stilini tanımlar.
- .circle button:focus seçicisi, düğmeye odaklandığında (ör. tıklama veya klavyeyle seçim) çerçevenin görünmemesini sağlar.
Navigasyon menüsü stilleri:
- nav, nav ul, nav ul li ve nav ul li i seçicileri, navigasyon menüsünün konumunu, stilini ve içerdiği ikonların boyutunu tanımlar.
- Navigasyon menüsündeki öğelerin animasyonları nav ul li, nav ul li + li ve nav ul li + li + li seçicileri ile tanımlanır.
İçerik bölümü stilleri:
- .content ve .content img seçicileri, içeriğin boyutlarını ve resimlerin en büyük genişliğini tanımlar.
- .content h1, .content small ve .content p seçicileri, başlıklar, küçük metin ve paragraf metinleri için stil tanımlar.

⭐ JavaScript kodu

const open = document.getElementById("open");
const close = document.getElementById("close");
const container = document.querySelector(".container");
open.addEventListener("click", () => {
container.classList.add("show-nav")
})
close.addEventListener("click", () => {
container.classList.remove("show-nav")
})

const open = document.getElementById("open");

const close = document.getElementById("close");

const container = document.querySelector(".container");

open.addEventListener("click", () => {

container.classList.add("show-nav")

})

close.addEventListener("click", () => {

container.classList.remove("show-nav")

})

İlk olarak, HTML’deki open, close ve container ID’li elemanları DOM’dan (Doküman Nesne Modeli) seçip değişkenlere atadık.
open düğmesine tıklandığında gerçekleşecek olan işlemler için bir olay dinleyicisi (event listener) ekledik. “click” olayı gerçekleştiğinde, olay dinleyicisi aşağıdaki işlemleri yapar:
- Anonim fonksiyon çalıştırılır.
- Bu işlev, container elemanının sınıf listesine “show-nav” sınıfını ekler (classList.add("show-nav")).
- Bu sınıfın eklenmesi, CSS’teki .container.show-nav seçicisi ile tanımlanan dönme animasyonunu tetikler.
Benzer şekilde close düğmesine tıklandığında gerçekleşecek olan işlemler için bir olay dinleyicisi ekledik. “click” olayı gerçekleştiğinde, olay dinleyicisi aşağıdaki işlemleri yapar:
- Anonim fonksiyonçalıştırılır.
- Bu işlev, container elemanının sınıf listesinden “show-nav” sınıfını kaldırır (classList.remove("show-nav")).
- Bu sınıfın kaldırılması, dönme animasyonunun tersine dönmesini tetikler ve sayfa orijinal konumuna geri döner.

İlgili Makaleler

HTML, CSS ve JavaScript ile Sayaç Örneği

Hidden Search Örneği

HTML, CSS ve JavaScript ile Contact Form Örneği

HTML, CSS ve JavaScript ile Navbar Örneği

Bir yanıt yazın Yanıtı iptal et