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
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
Über die CSS!
Hier was zum CSS https://www.w3schools.com/howto/howto_css_dropdown.asp
Ich habe jetzt den Code folgendermaßen geändert, allerdings funktioniert display:block noch nicht;
CSS:
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 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
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.
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.
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
Hier was zum CSS https://www.w3schools.com/howto/howto_css_dropdown.asp
Ich hab des Beispiel genommen
Ja das ist das mobile Menu, dass soweit auch funktioniert.
Aber das Menü für große Bildschirme funktioniert noch nicht.
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.
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.
Danke für die Hilfe,
jetzt funktioniert alles.
LG