CSS3 ve jQuery'da Navigasyon Menüsü Oluşturma

CSS3 ve jQuery'da Navigasyon Menüsü Oluşturma


 

Bu yazıda, HTML, CSS3 ve biraz jQuery kullanarak Tam Ekran Gezinme Menüsü oluşturacağız. Bu eğitimde Google Fontları, özellikle Montserrat'ı kullanacağız. Eklediğinizden emin olun.

HTML

Her zaman olduğu gibi, ilk adım HTML yapısını oluşturmaktır. İşte ihtiyacımız olan şey:

  • Sol tarafta bir logo, sağ tarafta iki düğme, oturum açma düğmesi ve kullanıcı tıkladığında tam ekran yer paylaşımını etkinleştiren bir menü düğmesini koyacağız bir gezinme çubuğu.
  • Tam ekran kaplama menüsü, burada menüye ve bir kapatma düğmesine sahip olacağız.

İşaretleme şudur:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<div class="navbar">
  <img class="logo" src="images/logo.png" alt="Foss Logo"/>
 
  <div class="navbar-buttons">
    <button class="button" type="button" name="button">SIGN INbutton>
    <span><img class="open-menu" src="images/menu.svg" alt=""/>span>
  div>
div>
 
<div class="overlay">
  <h2 class="nav-title">Navigationh2>
  <nav class="overlay-menu">
    <ul>
      <li><a href="#">Our Storea>li>
      <li><a href="#">Cataloga>li>
      <li><a href="#">Deliverya>li>
      <li><a href="#">Contacta>li>
      <li><img class="close-menu" src="images/close.svg" alt=""/>li>
    ul>
  nav>
div>

Artık html tasarımımızı oluşturduk, bir sonraki adıma geçelim.

 


CSS

İlk olarak, gövdeyi ve gezinme çubuğunu stillendirin. Bazı temel stiller verelim ve serin bir arka plan resmi ekleyelim.

1
2
3
4
5
6
7
8
9
10
11
12
13
* {
  box-sizing: border-box;
}
 
html, body {
  height: 100%;
  width: 100%;
  margin: 0;
  background: url('images/bg-final.jpg') no-repeat;
  background-position: 50% 10%;
  background-size: cover;
  font-family: 'Montserrat', sans-serif;
}

Şimdi gezinti çubuğunu şekillendirelim. Bunu yapacağız 90px heightve 100% width bunu da ayarlayacağız display flexve justify-content mülkü ayarlayacağız, space-between iki öğenin sol tarafta biri sağ tarafta olmasına izin verilecek. Ayrıca, oturum açma düğmesini stillemeyi de unutmayalım.

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
.navbar {
  height: 90px;
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 40px;
}
 
.navbar-buttons {
  position: relative;
  width: 155px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
 
/* Sing In Button */
.button {
  background-color: rgba(44, 45, 47, 0.749);
  width: 97px;
  height: 30px;
  font-size: 12px;
  color: #fff;
  border: none;
  border-radius: 20px;
  cursor: pointer;
}

Burada zorlu kısım geliyor, yer paylaşım menüsü  stilde.

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
.overlay {
  position: fixed;
  background: rgba(51, 55, 69, 0.80);
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  visibility: hidden;
  transition: opacity .35s, visibility .35s, height .35s;
  overflow: hidden;
}
 
.overlay.open {
  opacity: 1;
  visibility: visible;
  height: 100%;
}

Burada bindirmeleri güzel bir efekt ile birlikte verecek şekilde geçişler ekleyeceğiz. overflow: hidden.overlayposition: fixed

Tüm ekranı kaplamasını istediğimizden, konum %100 genişlik ve yükseklik ile sabitlenecek ve üst ve sol konumları 0'a ayarlamak, alanın tamamını kaplamasını garantiliyor.

Sonraki iki satır, devletler arasında değişen tek satırdır. .overlay olarak ayarlanır visibility: hiddenve opacity: 0 ve zaman .open sınıf uygulanır. Donukluk ile görünür hale gelir.

Şimdi navigasyon başlığını ve menü öğelerini bazı temel stillerle stillendirelim.

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
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
.overlay .nav-title {
  font-size: 22px;
  color: #fff;
  font-weight: bold;
  text-transform: uppercase;
  text-align: center;
  position: absolute;
  left: 50%;
  transform: translate(-50%);
  top: 8%;
}
 
.overlay nav {
  position: relative;
  height: 50%;
  top: 50%;
  transform: translateY(-50%);
  font-size: 50px;
  font-weight: 400;
  text-transform: uppercase;
  text-align: center;
  letter-spacing: 40px;
}
.overlay ul {
  list-style: none;
  padding: 0;
  margin: 0 auto;
  display: inline-block;
  position: relative;
  height: 100%;
}
.overlay ul li {
  display: block;
  position: relative;
  opacity: 0;
  margin-bottom: 50px;
}
.overlay ul li a {
  display: block;
  position: relative;
  color: #FFF;
  text-decoration: none;
  overflow: hidden;
}

Ayrıca, menü öğelerine ve sayfada bulunan tüm düğmelere biraz havada gezinme efektleri ekleyelim. Üzerinde fareyle üzerine gelin, odaklanın ve etkin olduğunuzda menü maddesinin üzerinde bir çizgi oluşturmasını sağlayın. Bunun için sözde unsurların gücünü kullanacağız.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
.overlay ul li a:after {
  content: '';
  position: absolute;
  top: 50%;
  left: 43.5%;
  width: 0%;
  transform: translateX(-50%);
  height: 3px;
  background: #FFF;
  transition: .35s;
}
 
.overlay ul li a:hover,
.overlay ul li a:focus,
.overlay ul li a:active {
  color: #ea2e49;
}
.overlay ul li a:hover:after,
.overlay ul li a:focus:after,
.overlay ul li a:active:after {
  width: 100%;
  background: #ea2e49;
}

Ve bu menü .open sınıf uygulandığında doğru efektten solmaya başlamasını sağlayın.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
.overlay.open li {
  animation: fadeInRight .5s ease forwards;
  animation-delay: .35s;
}
.overlay.open li:nth-of-type(2) {
  animation-delay: .4s;
}
.overlay.open li:nth-of-type(3) {
  animation-delay: .45s;
}
.overlay.open li:nth-of-type(4) {
  animation-delay: .50s;
}
 
@keyframes fadeInRight {
  0% {
    opacity: 0;
    left: 20%;
  }
  100% {
    opacity: 1;
    left: 0;
  }
}

Bu çok güzel görünecek. Şimdi de fareyle üzerine gelip diğer düğmeleri animasyon yapalım.

1
2
3
4
5
6
7
8
9