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

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

VPS Starter Arubacloud
0 głosów
576 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 (255,800 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ź 345 wizyt
Navbar-Bootstrap nie rozwija mi się menu.
pytanie zadane 15 sierpnia 2019 w Nasze projekty przez suciorek Nowicjusz (120 p.)
+1 głos
2 odpowiedzi 251 wizyt
Menu bootstrap - Problem
pytanie zadane 2 maja 2021 w HTML i CSS przez MateuszSikorski Obywatel (1,070 p.)
0 głosów
1 odpowiedź 330 wizyt
Bootstrap menu mobilne- zmiana szerokości zmiany wyglądu
pytanie zadane 5 lutego 2018 w HTML i CSS przez Q_Nick Mądrala (5,010 p.)

92,963 zapytań

141,929 odpowiedzi

321,162 komentarzy

62,298 pasjonatów

Kategorie pytań
Programowanie
Sprzęt komputerowy
Systemy operacyjne, programy
Sieci komputerowe
Hostingi, domeny, usługi
Urządzenia mobilne
Bezpieczeństwo, hacking
Rozwój zawodowy, nauka, praca
Egzaminy zawodowe
Matematyka, fizyka, logika
Grafika i multimedia
Ogłoszenia, zlecenia
Nasze projekty
Nasze poradniki
Sprawy forum
Offtop
Programowanie
C i C++ HTML i CSS JavaScript PHP SQL, bazy danych C# Java SPOJ Python Ruby Assembler Visual Basic Android, Swift, Symbian OpenGL, Unity Inne języki Algorytmy Systemy CMS Mikrokontrolery

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.

Wprowadzenie do ITsec, tom 2

Można już zamawiać tom 2 książki "Wprowadzenie do bezpieczeństwa IT" - będzie to około 650 stron wiedzy o ITsec (17 rozdziałów, 14 autorów, kolorowy druk).

Planowana premiera: 30.09.2024, zaś planowana wysyłka nastąpi w drugim tygodniu października 2024.

Warto preorderować, tym bardziej, iż mamy dla Was kod: pasja (użyjcie go w koszyku), dzięki któremu uzyskamy dodatkowe 15% zniżki! Dziękujemy zaprzyjaźnionej ekipie Sekuraka za kod dla naszej Społeczności!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...