Button on submenu in nav-CodePudding

I want to add dropdown to my current nav bar. I tried this code but dropdown content disappeared and now I don´t have any ideas to edit code to this be working. After my last edit it´s only show dropdown menu but I don´t click on any link. Dropdown, dropbtn was added to previous code. Can you help me with this? Thanks very much!

Here is code:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="shortcut icon" type="image/x-icon" href="menu.png" />
<title>MENU | Úvodné menu</title>
<meta charset=utf-8>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<style>
body {
  height: 100%;
  
  background-image: linear-gradient(orange, red);
}
</style>
<style>
body,h1 {font-family: "Raleway", sans-serif}
body, html {height: 100%}
.bgimg {
  background-image: linear-gradient(orange, red);
  min-height: 100%;
  background-position: full;
  background-size: ;
}
</style>
<style>
* {box-sizing: border-box;}

body { 
  margin: 0;
  font-family: Arial, Helvetica, sans-serif;
}

.dropdown .dropbtn {
  font-size: 16px;  
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  margin: 0;
}



.header {
  overflow: hidden;
  background-color: orange;
  padding: 20px 10px;
}

.header a {
  float: left;
  color: white;
  text-align: center;
  padding: 12px;
  text-decoration: none;
  font-size: 18px; 
  line-height: 25px;
  border-radius: 4px;
}

.header a.logo {
  font-size: 25px;
  font-weight: bold;
}

.header a:hover {
  background-color: #ddd;
  color: black;
}

.header a.active {
  background-color: red;
  color: white;
}

.header-right {
  float: right;
}

@media screen and (max-width: 500px) {
  .header a {
    float: none;
    display: block;
    text-align: left;
  }
  
  .header-right {
    float: none;
  }
}


.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;
}

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

.dropdown-content a:hover {
  background-color: #ddd;
}
.dropdown {
  float: left;
  overflow: hidden;
}
.dropdown:hover .dropdown-content {
  display: block;
}
.dropbtn:hover ~ .dropdown-content {display: block;}
</style>
</head>
<body onl oad="startTime()">

<div >
 <a id="txt" hidden></a>
<img src="https://i.ibb.co/6Nkbdb3/dlhemenu-1-1-1.png"  title="Odhlásiť sa" alt="MENU logo" width="150" height="50" onclick="window.location='/logout.php'"> 
 &nbsp
 <a ><i >&nbsp</i>Dropdown 
      <i ></i>
    </a>
    <div >
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>   


    <div >
    <a  href="/welcome.php">Úvodné menu</a>
        <a href="/online.html">Online hodiny</a>
    <a href="/vyplnit.html">Testy na vyplnenie</a>
    <a href="/znamky3.html">Známky</a>
    <a href="/rozvrh.html">Rozvrh hodín</a>
     <a href="/dochadzka.html">Dochádzka</a>
      <a href="/ucenie.html">Učebný materiál</a>
       <a href="/hry.html">Hry</a>
  <a href="/omne.php">O mne</a>
  
  </div>
</div>

CodePudding user response：

For this case I would suggest using Bootstrap, it will make life easier for you. It mainly allows people to apply some nice functionalities without leaving their HTML.

Here is the link to the docs of bootstrap v4.6 navbars. And here you can find all the docs.

You could try to integrate something as bellow in your website:

<html>
  <head>
     <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/jquery.slim.min.js" defer></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" defer></script>
    <title>MENU | Úvodné menu</title>
    <meta charset=utf-8>
  </head>
  
  <body>
    <!-- Start of navbar -->
    <nav  style="background:#FFBD35">

      <button  type="button" data-toggle="collapse" data-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
      <div  id="navbarNavDropdown">
        <ul >

          <!-- Section_1 link -->
          <li >
            <a  href="#">Úvodné Menu<span >(current)</span></a>
          </li>

          <!-- Section_2 link -->
          <li >
            <a  href="#">Online hodiny</a>
          </li>

          <!-- Section_3 link -->
          <li >
            <a  href="#">Testy na vyplnenie</a>
          </li>

           <!-- Dropdown -->
          <li >
            <a  href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-expanded="false">
               <i ></i>&nbsp; Dropdown
            </a>
            <div  aria-labelledby="navbarDropdownMenuLink">
              <a  href="#">Action</a>
              <a  href="#">Another action</a>
              <a  href="#">Something else here</a>
            </div>
          </li>

        </ul>
      </div>
    </nav>
    <!-- End of navbar -->
  
  </body>
</html>

CodePudding user response：

if i understand your question correctly you are searching for a simple dropdown menu with js?

here is a short excample

HTML:

<html lang="en">
  <head>
    <!-- your header settings -->
    <link rel="stylesheet" href="page.css">
  </head>
  <body>
    <header>
      <span id="dropbtn">
        <span ></span>
        <span>Dropdown</span>
        <span ></span>
      </span>
      <div id="dropdown-content" >
        <a href="#">Link 1</a>
        <a href="#">Link 2</a>
        <a href="#">Link 3</a>
      </div>  
    </header>

    <script src="menu.js"></script>
  </body>
</html>

First in this excample HTML, CSS and JS in seperated Files. Than you get a better overview and your code perhaps will be reuseable in future ;)

CSS:

.hidden {
  display:none;
}

JavaScript:

function clickListener_btn(event){
  /** @type {HTMLElement} */
  let clickedElement = event.currentTarget();

  /** @type {HTMLElement} */
  let dropDownMenu = document.querySelector('#dropdown-content');
  if(dropDownMenu.classList.has('hidden') {
    dropDownMenu.classList.remove('hidden');
  } else {
    dropDownMenu.classList.add('hidden');
  }
}

/** @type {HTMLElement} */
let btn = document.querySelector('#dropbtn');

btn.addEventListener('click', clickListener_btn);

Problem No. 1 with your code. You click on a <a> Tag as button. So a new Link will be forced. That automaticly runs a reload if you have no href set. This is because in the sample a simple <span> element is used as button.

i hope this will be helpfully to you.

And another thing. I'm very sure there are tons of questions for dropdown menus in the database. Try to find samples to fix your code.

Another trick can be to do the dropdown only with css but i think this will be to hard for the beginning. ohterwise use your favorite search engine on look for "css only dropdown"