• 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.

Object Storage Arubacloud
0 głosów
435 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 (253,340 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ź 326 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 232 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ź 310 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,568 zapytań

141,422 odpowiedzi

319,635 komentarzy

61,956 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.

Akademia Sekuraka

Kolejna edycja największej imprezy hakerskiej w Polsce, czyli Mega Sekurak Hacking Party odbędzie się już 20 maja 2024r. Z tej okazji mamy dla Was kod: pasjamshp - jeżeli wpiszecie go w koszyku, to wówczas otrzymacie 40% zniżki na bilet w wersji standard!

Więcej informacji na temat imprezy 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!

O działaniu forum

Pasja informatyki w internecie

Polecane miejsca w sieci

Snow Theme by Q2A Market
Powered by Question2Answer
...