Çözüldü Navbar nasıl yapılır?

Bu konu çözüldü olarak işaretlenmiştir. Çözülmediğini düşünüyorsanız konuyu rapor edebilirsiniz.

Cengizhanjj

Femtopat
Katılım
8 Aralık 2022
Mesajlar
52
Daha fazla  
Cinsiyet
Erkek
Selam arkadaşlar yardım edebilecek var mı?

HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="m.css" type="text/css" media="all" />
    <title>Market</title>
  </head>
  <body>
     
  </div>
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Products</a></li>
      </ul>
    </div>

    <main class="container">
      <div class="product-section">
        <h1>Ürünler</h1>
        <ul class="product-list">
          <li>
            <div class="product-item">
              <img src="https://via.placeholder.com/150" alt="Product Image" />
              <h2>Ürün 1</h2>
              <p>Açıklama: Ürün 1'in açıklaması</p>
              <p>Fiyat: 100 TL</p>
              <div class="button">
                <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
          <li>
            <div class="product-item">
              <img src="https://via.placeholder.com/150" alt="Product Image" />
              <h2>Ürün 2</h2>
              <p>Açıklama: Ürün 2'nin açıklaması</p>
              <p>Fiyat: 200 TL</p>
              <div class="button">
                <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>

    <footer>
    </footer>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".navbar").hide();
        $("#showNavbar").click(function () {
          $(".navbar").toggle();
        });
      });
    </script>
  </body>
</html>
CSS: 
body {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/30/11/50/stripe-2696784_640.png");
  margin: 0;
  font-family: Arial, sans-serif;
}

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.navbar {
  background-color: #333;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 20px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 1;
}

.navbar button {
  background-color: red;
  color: #fff;
  cursor: pointer;
  padding: 10px 15px;
  border: none;
  outline: none;
  font-size: 18px;
}

.navbar button:hover {
  background-color: #fff;
  color: #333;
}

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
}

li a {
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #fff;
  color: #333;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: red;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.product-section {
  background-color: #fff;
  padding: 20px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.product-item {
  width: 60%;
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.product-item img {
  width: 100%;
  margin-bottom: 20px;
}

.product-item h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.product-item p {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
@media only screen and (max-width: 600px) {
.navbar {
flex-wrap: wrap;
justify-content: center;
}

.navbar button {
display: block;
margin: 10px 0;
}

ul {
flex-wrap: wrap;
justify-content: center;
}

.product-section {
padding: 10px;
}

.product-item {
width: 100%;
margin: 5px;
padding: 10px;
}
}
 
Çözüm
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css">
    <title>Market</title>
  </head>
  <body>
    

    <header class="navbar-techno">
        <ul>
            <li>Ana Sayfa</li>
            <li>About</li>
            <li>Products</li>
        </ul>
    </header>
    <main class="container">
      <div class="product-section">
        <h1>Ürünler</h1>
        <ul class="product-list">
          <li>
            <div class="product-item">
              <img src="https://via.placeholder.com/150" alt="Product Image" />
              <h2>Ürün 1</h2>
              <p>Açıklama: Ürün 1'in açıklaması</p>
              <p>Fiyat: 100 TL</p>
              <div class="button">
                <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
          <li>
            <div class="product-item">
              <img src="https://via.placeholder.com/150" alt="Product Image" />
              <h2>Ürün 2</h2>
              <p>Açıklama: Ürün 2'nin açıklaması</p>
              <p>Fiyat: 200 TL</p>
              <div class="button">
                <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>

    <footer>
    </footer>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".navbar").hide();
        $("#showNavbar").click(function () {
          $(".navbar").toggle();
        });
      });
    </script>
  </body>
</html>

CSS: 
body {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/30/11/50/stripe-2696784_640.png");
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar-techno{
  background-color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
}

.navbar-techno ul li{
  padding: 10px;
  border-radius: 4px;
}

.navbar-techno ul li:hover{
  background-color: #ddd;
  transition: 100ms;
  cursor: pointer;
}

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
}

li a {
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #fff;
  color: #333;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: red;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.product-section {
  background-color: #fff;
  padding: 20px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.product-item {
  width: 60%;
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.product-item img {
  width: 100%;
  margin-bottom: 20px;
}

.product-item h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.product-item p {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
@media only screen and (max-width: 600px) {
.navbar {
flex-wrap: wrap;
justify-content: center;
}

.navbar button {
display: block;
margin: 10px 0;
}

ul {
flex-wrap: wrap;
justify-content: center;
}

.product-section {
padding: 10px;
}

.product-item {
width: 100%;
margin: 5px;
padding: 10px;
}
}

Tarihe göre sırala Puana göre sırala
HTML: 
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <link rel="stylesheet" href="style.css">
    <title>Market</title>
  </head>
  <body>
    

    <header class="navbar-techno">
        <ul>
            <li>Ana Sayfa</li>
            <li>About</li>
            <li>Products</li>
        </ul>
    </header>
    <main class="container">
      <div class="product-section">
        <h1>Ürünler</h1>
        <ul class="product-list">
          <li>
            <div class="product-item">
              <img src="https://via.placeholder.com/150" alt="Product Image" />
              <h2>Ürün 1</h2>
              <p>Açıklama: Ürün 1'in açıklaması</p>
              <p>Fiyat: 100 TL</p>
              <div class="button">
                <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
          <li>
            <div class="product-item">
              <img src="https://via.placeholder.com/150" alt="Product Image" />
              <h2>Ürün 2</h2>
              <p>Açıklama: Ürün 2'nin açıklaması</p>
              <p>Fiyat: 200 TL</p>
              <div class="button">
                <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>

    <footer>
    </footer>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
      $(document).ready(function () {
        $(".navbar").hide();
        $("#showNavbar").click(function () {
          $(".navbar").toggle();
        });
      });
    </script>
  </body>
</html>

CSS: 
body {
  background-image: url("https://cdn.pixabay.com/photo/2017/08/30/11/50/stripe-2696784_640.png");
  margin: 0;
  font-family: Arial, sans-serif;
}

.navbar-techno{
  background-color: #fff;
  height: 60px;
  display: flex;
  align-items: center;
}

.navbar-techno ul li{
  padding: 10px;
  border-radius: 4px;
}

.navbar-techno ul li:hover{
  background-color: #ddd;
  transition: 100ms;
  cursor: pointer;
}

.container {
  height: 100vh;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

ul {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding: 0;
}

li {
  margin: 0 10px;
}

li a {
  color: #fff;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

li a:hover {
  background-color: #fff;
  color: #333;
}

button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: red;
  color: #fff;
  border: none;
  font-size: 14px;
  cursor: pointer;
}

.product-section {
  background-color: #fff;
  padding: 20px;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
  text-align: center;
}

.product-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
}

.product-item {
  width: 60%;
  background-color: #fff;
  margin: 10px;
  padding: 20px;
  text-align: center;
  box-shadow: 1px 1px 3px rgba(0, 0, 0, 0.1);
}

.product-item img {
  width: 100%;
  margin-bottom: 20px;
}

.product-item h2 {
  font-size: 18px;
  margin-bottom: 10px;
}

.product-item p {
  font-size: 14px;
  color: #333;
  margin-bottom: 10px;
}

footer {
  background-color: #333;
  color: #fff;
  text-align: center;
  padding: 20px;
}
@media only screen and (max-width: 600px) {
.navbar {
flex-wrap: wrap;
justify-content: center;
}

.navbar button {
display: block;
margin: 10px 0;
}

ul {
flex-wrap: wrap;
justify-content: center;
}

.product-section {
padding: 10px;
}

.product-item {
width: 100%;
margin: 5px;
padding: 10px;
}
}

 
Artı 0 Eksi
Çözüm
Teşekürler abi
 
Artı 0 Eksi
Mesaj yazmak için giriş yapmalı ya da kaydolmalısınız.

Benzer konular

Websitesi navbar gözükmüyor
2
Mesaj
10
Görüntüleme
1.218
Cengizhanjj
Sticky-Top Navbar Devam Etmiyor
Mesaj
2
Görüntüleme
1.076
russianrapper
  • Soru
HTML ve CSS'te Üst Kısım Navbar Altına Gidiyor
Mesaj
5
Görüntüleme
4.418
umutalper11
A
  • Çözüldü
Çözüldü  Sayfayı aşağı kaydırınca küçülen navbar nasıl yapılır?
Mesaj
2
Görüntüleme
3.181
AANIL123
A
R
Technopat Navbar Tasarımı
Mesaj
2
Görüntüleme
2.840
Rufiq Cavadov
R
Menü
Giriş yap
Kaydol
Bu siteyi kullanmak için çerezler gereklidir. Siteyi kullanmaya devam etmek için çerezleri kabul etmelisiniz. Daha Fazlasını Öğren.…