Websitesi navbar gözükmüyor

Cengizhanjj

Femtopat
Katılım
8 Aralık 2022
Mesajlar
52
Daha fazla  
Cinsiyet
Erkek
Selamlar Navbar gözükmüyor nasıl düzeltebilirim

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 class="navbar">
<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>

<button id="showNavbar">Kodunda Market</button>
<div class="navbar">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Products</a></li>
  </ul>
</div>
</div>
</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="button2">
                
            
              <button>Sepete Ekle</button>
              </div>
            </div>
          </li>
        </ul>
      </div>
    </main>

    <footer>
      <p>&copy; Market</p>
    </footer>
  </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;
}

.button1 {
  margin: 0 15px;
  padding: 10px 20px;
  border-radius: 5px;
  border: 5px solid red;
  background-color: transparent;
  color: red;
}

.button2 {
  margin: 0 15px;
  padding: 10px 20px;
  border-radius: 5px;
  border: 5px solid red;
  background-color: transparent;
  color: red;
}

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

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

li {
  margin: 0 10px;
}

li a {
  color: #333;
  text-decoration: none;
  font-size: 16px;
}

li a:hover {
  color: #fff;
}

.products {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  margin-top: 80px;
  padding: 20px;
}

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

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

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

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

.product button {
  padding: 10px 20px;
  border-radius: 5px;
  background-color: #333;
  color: #fff;
  border: none;
  cursor: pointer;
}

@media (max-width: 767px) {
  .navbar {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
  }

  .logo {
    width: 100%;
    text-align: center;
    margin-bottom: 1rem;
  }

  ul {
    width: 100%;
   }
.products {
margin-top: 60px;
}

.product {
width: 40%;
}
}
Yardım ederseniz sevinirim
 
JavaScript:
$(document).ready(function(){
  $(".navbar").hide();
  $("#showNavbar").click(function(){
    $(".navbar").show();
  });
});
Bu şekilde dener misiniz?
 
Olmuyor hala gözükmüyor.

JavaScript:
$(document).ready(function(){
 $(".navbar").hide();
 $("#showNavbar").click(function(){
 $(".navbar").show();
 });
});
Bu şekilde dener misiniz?

Yani daha doğrusu üsteki navbar açılsın diye olan buton gözükmüyor.

 
Son düzenleyen: Moderatör:
HTML:
<button id="showNavbar" class="button1">Kodunda Market</button>
O butona stil işlemi yapmamışsınız. Şimdilik button1 sınıfı verip deneyelim.
 
HTML:
<button id="showNavbar" class="button1">Kodunda Market</button>
O butona stil işlemi yapmamışsınız. Şimdilik button1 sınıfı verip deneyelim.

Sizden önce olayı çözdüm ama şu anda site gözükmemekte yardım edebilir misiniz?

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: 20%;
  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: 767px) {
.container {
height: auto;
}

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

ul {
display: none;
}

.product-section {
padding: 10px;
}

.product-item {
width: 100%;
margin: 10px 0;
}
}
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 class="navbar">
<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>
<div class="navbar">
  <button id="showNavbar">Kodunda Market</button>
  <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>
      <p>&copy; Market</p>
    </footer>
  </body>
</html>

HTML:
<button id="showNavbar" class="button1">Kodunda Market</button>
O butona stil işlemi yapmamışsınız. Şimdilik button1 sınıfı verip deneyelim.
Sizden önce olayı çözdüm ama şu anda site gözükmemekte yardım edebilir misiniz?
 
Son düzenleyen: Moderatör:
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 class="navbar">
      <button id="showNavbar">Kodunda Market</button>
      <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>
      <p>&copy; Market</p>
    </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>
Script taglerini body sonuna ekledim gözüküyor site. Geç cevaplarım için özür dilerim.
 
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 class="navbar">
      <button id="showNavbar">Kodunda Market</button>
      <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>
      <p>&copy; Market</p>
    </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>
Script taglerini body sonuna ekledim gözüküyor site. Geç cevaplarım için özür dilerim.
Yardımın için teşekürler abi seviliyorsun.

Yardımın için teşekürler abi seviliyorsun
Abi navbar gözükmüyor tekrar.

Yardımın için teşekürler abi seviliyorsun


Abi navbar gözükmüyor tekrar
Çözdüm olayı fakat ben bunların yan yana olmasını istiyorum abi.
 
Son düzenleyen: Moderatör:

Yeni konular

Geri
Yukarı