• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Bootstrap - drop menu w czystym css i htmlu nie działa.

VPS Starter Arubacloud
0 głosów
395 wizyt
pytanie zadane 30 listopada 2022 w HTML i CSS przez ptomeccc Użytkownik (800 p.)

Cześć, mam problem ze swoją stroną, którą robię jako projekt zaliczeniowy. Zrobiłem w navie dropmenu w czystym htmlu i css. Ale w innym divie, chce użyć bootstrapa. Po dodaniu skryptu bootstrapa do swojego projektu, dropmenu nagle przestaje działać. Wiem, że ma na to wpływ bootstrap, czy ktoś wie co powinienem zmienić, żeby dropmenu działało tak samo jak przed dodaniem bootstrapa. Załączam poniżej kod, navbar o którym mowa to ten z klasą .third_nav

<!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="test.css" />
    <link
      href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi"
      crossorigin="anonymous" />
    <script
      src="https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.bundle.min.js"
      integrity="sha384-OERcA2EqjJCMA+/3y+gxIOqMEjwtxJY7qPCqsdltbNJuaOe923+mo//f6V8Qbsw3"
      crossorigin="anonymous"></script>
  </head>
  <body>
    <div class="third_nav">
      <div class="dropdown left_side">
        <button class="dropbtn">
          UCZELNIA
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          WYDZIAŁY
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          INSTYTUTY
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link 4</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          JEDNOSTKI
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
          <a href="">Link 4</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
          <a href="">Link</a>
        </div>
      </div>

      <div class="dropdown left_side">
        <button class="dropbtn">
          <b id="rekru">REKRUTACJA</b>
          <i class="fa fa-caret-down"></i>
        </button>
        <div class="dropdown-content">
          <a href="#">Link 1</a>
          <a href="#">Link 2</a>
          <a href="#">Link 3</a>
        </div>
      </div>

      <a href="" class="element">STUDENT</a>
      <a href="" class="element">PRACOWNIK</a>
      <a href="" class="element">WSPÓŁPRACA MIĘDZYNARODOWA</a>
      <a href="" class="element">KONTAKT</a>
    </div>
    <div class="break_div"></div>
    <div class="photo_container">
      <a href="" id="a_rekrutacja"
        ><img src="img/baner.jpg" id="img_rekrutacja" alt="info_baner"
      /></a>
    </div>
    <div class="news">
      <div class="card_1" style="width: 18rem">
        <img src="img/news_1.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Dla kandydata</h2>
          <p class="card-text">Oferta edukacyjna</p>
          <a href="#" class="btn btn-primary"
            >Dowiedz się więcej o ofercie edukacyjnej</a
          >
        </div>
      </div>
      <div class="card_2" style="width: 18rem">
        <img src="img/news_2.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Dla studenta</h2>
          <p class="card-text">Informacje dla studentów</p>
          <a href="#" class="btn btn-primary">Dowiedz się więcej</a>
        </div>
      </div>
      <div class="card_3" style="width: 18rem">
        <img src="img/news_3.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Erasmus+</h2>
          <p class="card-text">Studiuj za granicą</p>
          <a href="#" class="btn btn-primary">Dowiedz się więcej o Erasmus+</a>
        </div>
      </div>
      <div class="card_4" style="width: 18rem">
        <img src="img/news_4.jpg" class="card-img-top" alt="..." />
        <div class="card-body">
          <h2 class="card-title">Executive MBA</h2>
          <p class="card-text">Zapisz się na studia</p>
          <a href="#" class="btn btn-primary">Dowiedz się więcej o studiach</a>
        </div>
      </div>
    </div>
    <div class="updates">
      <h2>Aktualności</h2>
    </div>
  </body>
</html>
* {
  margin: 0;
  padding: 0;
}

body {
  width: 100%;
  background-color: #fff;
  font-family: roboto, sans-serif;
  overflow-x: hidden;
}

/**/

.first_list_element a,
.second_list_element a,
.third_list_element a {
  text-decoration: none;
  color: black;
}

.first_list_element,
.second_list_element,
.third_list_element {
  list-style-type: none;
}

/*third nav*/

.third_nav {
  overflow: hidden;
  background-color: #00458c;
  height: 4rem;
  text-align: center;
  float: left;
  width: 100%;
}

/* Links inside the navbar */
.third_nav a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

/* Left Side*/
.left_side {
  margin-top: 0.5rem;
}

/*Elementy bez dropmenu*/
.element {
  position: relative;
  top: 0.5rem;
  margin-left: 1.5rem;
}

/*Element Rekrutacja*/

#rekru {
  text-decoration: underline;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
  margin-left: 2rem;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Add a red background color to navbar links on hover */
.third_nav a:hover,
.dropdown:hover .dropbtn {
  border: 2px dotted red;
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #ddd;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/*break par*/
.break_div {
  clear: both;
  height: 5rem;
  background-color: white;
}

/*img section*/

.photo_container {
  object-fit: cover;
  width: 100%;
}

#img_rekrutacja {
  object-fit: cover;
  width: 100%;
}

/*news section*/
.news {
  margin: 3rem;
  position: relative;
  left: 4rem;
}

.card_1,
.card_2,
.card_3,
.card_4 {
  float: left;
  text-align: center;
  margin-right: 3rem;
}

.btn {
  width: 100%;
}

.card-body {
  margin-top: 1.5rem;
}

.card-text {
  margin-top: 3rem;
}

/*update section*/
.updates {
  float: left;
  margin-top: 3rem;
}

 

1 odpowiedź

0 głosów
odpowiedź 30 listopada 2022 przez VBService Ekspert (251,250 p.)
wybrane 2 grudnia 2022 przez ptomeccc
 
Najlepsza

Przez dodanie bootstrap-a jest dublowana nazwa klasy .dropdown

<div class="dropdown left_side">

 zrób np. taki zapis w div o klasie .third_nav (dodaj np. znak podkreślenia do nazwy)

<div class="dropdown_ left_side">

 

<div class="third_nav">
    <div class="dropdown_ left_side">
        <button class="dropbtn">
            UCZELNIA
            <i class="fa fa-caret-down"></i>
        </button>

        ...

    <div class="dropdown_ left_side">
        <button class="dropbtn">
           WYDZIAŁY
           <i class="fa fa-caret-down"></i>
        </button>

        ... itd

</div><!-- /.third_nav -->

i odpowiednio w css

.dropdown_ { ...

.dropdown_ .dropbtn { ...

.third_nav a:hover,
.dropdown_:hover .dropbtn { ...

.dropdown_:hover .dropdown-content { ...

 

 

BTW, zapisz to

.third_nav a:hover,
.dropdown_:hover .dropbtn {
  border: 2px dotted red;
}

np. tak

.third_nav a,
.dropdown_ .dropbtn {
  border: 2px dotted transparent;
}
.third_nav a:hover,
.dropdown_:hover .dropbtn {
  border: 2px dotted red;
}

lub

.third_nav a,
.dropdown_ .dropbtn {
  border: 2px dotted transparent;
  transition: all 250ms;
}
.third_nav a:hover,
.dropdown_:hover .dropbtn {
  border: 2px dotted red;
}

przestaną "skakać" wskazane elementy gdy podczas :hover "dostają" czerwoną kropkowaną ramkę (border - dotted)

Podobne pytania

0 głosów
1 odpowiedź 322 wizyt
pytanie zadane 15 sierpnia 2019 w Nasze projekty przez suciorek Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 223 wizyt
pytanie zadane 2 maja 2021 w HTML i CSS przez MateuszSikorski Obywatel (1,070 p.)
0 głosów
1 odpowiedź 305 wizyt

92,455 zapytań

141,263 odpowiedzi

319,099 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...