Menü mit Hover Effekt

Parzival · 24. Januar 2020

Hallo,

Ich arbeite derzeit daran, mein eigenes Template zu programmieren.

Allerdings scheitere ich an dem Menü. Wie kann ich ein Dropdown Menü mit Hover Effekt erstellen und muss ich das über die CSS datei oder über Joomla machen?

Danke im Voraus

Indigo66 · 24. Januar 2020

Über die CSS!

addi · 24. Januar 2020

Hier was zum CSS https://www.w3schools.com/howto/howto_css_dropdown.asp

Parzival · 25. Januar 2020

Ich habe jetzt den Code folgendermaßen geändert, allerdings funktioniert display:block noch nicht;

CSS:

Code

html, body {
    height: 100%;
}
* {margin:0px; padding:0px; }

/*Gestaltung des Menues */


.logo {

width:100%;
margin:0px;
border:0;






}





.logo img {
display:block;
 width:100%;
margin:0px;
border:0;
}


.topnav {
  display:none;
}



.topmenu {



background-color:#1b76b8;



}



       

.topmenu ul {
   
    list-style-type: none;

margin-left:25%;
    
    

    padding: 0;

    overflow: hidden;

    background-color: #1b76b8; /* Hintergrundfarbe des Menues*/





     text-align: center;

 }



.topmenu li {
 float:left;
     text-align: center;
     display:block;

 }
.topmenu li a {

    display: inline-block;

    color: white;

    text-align: center;
     text-align: center;
    padding: 1vh 1vh;

    text-decoration: none;

}
.topmenu nav ul ul li  a:hover {

    background-color: #fe0339;   /* Farbe bei Mousehover */

 }














.topmenu nav ul ul li ul li a {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
}





.topmenu nav ul ul li  a:hover .topmenu nav ul ul li ul li a {display: block;}
































 .inhalt {

margin-left:1%;
width:74%;
float:left;
padding-bottom:10%;

position:relative;
overflow:auto;
height:90%;


 }

.rechts {
  width:24%;
  float:left;
  margin-right:1%;
  
}


.linksUnten    {
position: fixed;
  padding: 10px;
  bottom: 0;
  left: 0;
  right: 0;

 background-color: #1b76b8;
  border-top: 2px solid #1b76b8;;
  text-align: center;
 color:white;

height:20px;

clear: both;

 
}



.linksUnten a:hover {


color:#ffff;







}
@media only screen and (max-width: 600px) {
  #topmenu li {
    display:none;
  }
  
body {
  font-family: Arial, Helvetica, sans-serif;
}

.mobile-container {
  max-width: 480px;
  margin: auto;
  background-color: #555;
  height: 500px;
  color: white;
  border-radius: 10px;
}

.topnav {
  overflow: hidden;
  background-color: #1b76b8;
  position: relative;
  display:block;
}
  .topnav img:hover {
    background-color:red;
  }
  .topnav img:active {
    background-color:red;
  }
  .topnav img {
    
    display:block;
  }

.topnav #myLinks {
  display: none;
}

.topnav  a {
  color: white;
  padding: 14px 16px;
  text-decoration: none;
  font-size: 17px;
  display: block;
}

.topnav  a.icon {
  
  display: block;
  position: absolute;
  right: 0;
  top: 0;
  width:32px;
  height:32px;
}

.topnav a:hover {
  background-color: red;
  
}
  .topnav  a.icon:hover {
    background-color:red;
  }
.active {
  background-color: #1b76b8;
  
  display:block;
}
  .mobilemenu {
    display:block;
  }
  .inhalt {
    width:100%
    
    
  }

Alles anzeigen

Und die PHP:

PHP

<?php defined( '_JEXEC' ) or die( 'Restricted access' );?>
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
   xml:lang="<?php echo $this->language; ?>" lang="<?php echo $this->language; ?>" >

<head>
<title></title>

<meta name="editor" content="html-editor phase 5">
<meta name="viewport" content="width=device-width, initial-scale=1.0">



<script>
/* When the user clicks on the button, 
toggle between hiding and showing the dropdown content */
function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}

// Close the dropdown if the user clicks outside of it
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}
</script>





<jdoc:include type="head" />

<link rel="stylesheet" href="<?php echo $this->baseurl ?>/templates/bruckmhl/css/stylesheet.css" type="text/css" />













    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Titel der Seite | Name der Website</title>
  </head>

<body>

<div class="logo">

<img src="<?php echo $this->baseurl ?>/templates/bruckmhl/images/logo.jpg"></img>





</div>
<div id="mobilemenu">
<div class="topnav">
<ahref="javascript:void(0);" class="icon" onclick="myFunction()">
   <img src="<?php echo $this->baseurl ?>/templates/bruckmhl/images/Hamburger_icon.png" width="32px"; height="32px";></img>
     </a>
  <div id="myLinks">
    <jdoc:include type="modules" name="top" />
  </div>
  
</div>
</div>
<script>
function myFunction() {
  var x = document.getElementById("myLinks");
  if (x.style.display === "block") {
    x.style.display = "none";
  } else {
    x.style.display = "block";
  }
}
</script>





<div class="topmenu" >
 <nav>
<ul>
<jdoc:include type="modules" name="top" />
</ul>
</nav>
</div>
<br>
<div class="alleSpalten">
<body text="#000000" bgcolor="#FFFFFF" link="#FF0000" alink="#FF0000" vlink="#FF0000">

<jdoc:include type="modules" name="bottom" />



<div class="inhalt">

<jdoc:include type="modules" name="content-main" type="xhtml"/>

<jdoc:include type="component" />





</div>
  
  <div class="rechts">
  
  
  
  </div>
  


<div class="linksUnten">


<p>Design by Hannes Gebauer</p>

</div>


</body>



</html>

Alles anzeigen

Kann mir jemand sagen wo der Fehler liegt, dass das Dropdown nicht funktioniert?

Mfg

Indigo66 · 25. Januar 2020

Link zu Seite? Damit wir life sehen können wie das Dropdown relisiert wurde.

Wir lesen Code auch nicht gerade wie in einem Roman.

Hier ein paar Bsp inkl. Tutorial wie Dropdown inkl. Hover mit CSS funktioniert.

https://t3n.de/news/10-freie-html5-435735/

Parzival · 25. Januar 2020

Hier der Link:

http://20200125559.joomla-demo.de/

Bei Hover über Start sollte eigentlich ein weiterer Link erscheinen.

Wie ein Dropdown mit CSS funktioniert weiß ich, nur mit Joomla bringe ich des nicht zum laufen.

Indigo66 · 25. Januar 2020

Wo hast Du denn das Dropdown her?

Meine Ansicht nach, fehlt das JS der aus .topmenu nav ul ul li ul li a { display: none; }

ein .topmenu nav ul ul li ul li a { display: inline-block; } macht

Parzival · 25. Januar 2020

Zitat von addi

Hier was zum CSS https://www.w3schools.com/howto/howto_css_dropdown.asp

Ich hab des Beispiel genommen

christine2 · 25. Januar 2020

Hallo,

ein Drop Down Menü habe ich nicht in .topmenu gefunden, sondern hier (temporary weggenommen):

Code

.topnav {
  display:none;
}

Liebe Grüße

Christine

Parzival · 25. Januar 2020

Ja das ist das mobile Menu, dass soweit auch funktioniert.

Aber das Menü für große Bildschirme funktioniert noch nicht.

christine2 · 25. Januar 2020

Aha. Hier gibt es auch ein display:none;

Code

.topmenu nav ul ul li ul li a {
    display: none;
    position: absolute;
    background-color: 
#f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px
    rgba(0,0,0,0.2);
    z-index: 1;
}

Indigo66 · 25. Januar 2020

Ok, das geht auch ohne JS.

Aber der Fehler ist, dass Dein Bsp mit Buttons und einem DIV-Container als Dropdown funktioniert.

Allgemein Navigation-Menüs (so auch in Joomla) werden aus aber aus unsortierten Listen erstellt.

Ich würde mir da lieber eine Version aus denen von mit geposteten Link anschauen und in Joomla umsetzten, basierend auf UL und LI.

addi · 25. Januar 2020

Du musst das Überelement fragen (hover auf li oder seltener auf a) und das Unterelement ansteuern (ul darunter).

.topmenu ul.nav > li:hover > ul {

display: block;

}

Man versteckt das ul und nicht das a darunter, wie du das gemacht hast.

CSS lernen.

Parzival · 26. Januar 2020

Danke für die Hilfe,

jetzt funktioniert alles.

LG

Tags