|
You last visited: Today at 01:37
Advertisement
[PHP/CSS] Dropdown Menü - Hilfe
Discussion on [PHP/CSS] Dropdown Menü - Hilfe within the Web Development forum part of the Coders Den category.
08/11/2013, 22:06
|
#1
|
elite*gold: 149 
Join Date: Feb 2010
Posts: 1,297
Received Thanks: 345
|
[PHP/CSS] Dropdown Menü - Hilfe
Hey,
ich habe eine Website für einen Freund erstellt. Ich weiß leider, trotz durchlesen vieler Tutorials, nicht, wie ich es hinkriege ein Dropdown Menü zu erstellen.
Ein Menü habe ich berreits. Es soll jedoch bei einem Menüpunkt ein Dropdown Menü erscheinen wenn man über diesen Menüpunkt mit der Maus fährt.
Meine Website sieht bis jetzt so aus:
Ich möchte das bei dem Menüpunkt "Angebote" ein Dropdown Menü bei einem Hover auf Angebote erscheint. Dies soll nur in CSS und HTML/PHP gecoded werden. Und ich hoffe das ihr mir da helfen könnt.
Mein jetziger Code sieht so aus:
index.php
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">
<title>XX</title>
</head>
<body>
<div class="clear">
<div id="border">
<div id="header">
<center><img src="img/head.png" width="300px" height="80px"></center>
</div>
<div id="menu">
<div id="navi">
<?PHP include("navi.php"); ?>
</div>
</div>
<div id="section">
<?PHP
$includeDir = ".".DIRECTORY_SEPARATOR."pages".DIRECTORY_SEPARATOR;
$includeDefault = $includeDir."home.php";
if(isset($_GET['s']) && !empty($_GET['s']))
{
$_GET['s'] = str_replace("\0", '', $_GET['s']);
$includeFile = basename(realpath($includeDir.$_GET['s'].".php"));
$includePath = $includeDir.$includeFile;
if(!empty($includeFile) && file_exists($includePath))
{
include($includePath);
}
else
{
include($includeDefault);
}
}
else
{
include($includeDefault);
}
?>
</div>
</div>
</div>
</body>
</html>
navi.php
Code:
<li class="topmenu"><a href="index.php"><h1 class="h1menu">Startseite</h1></a></li>
<li class="topmenu"><a href="index.php?s=oeffnung"><h1 class="h1menu">Öffnungszeiten</h1></a></li>
<li class="topmenu"><a href="index.php?s=angebote"><h1 class="h1menu">Angebote</h1></a></li>
<li class="topmenu"><a href="index.php?s=fotos"><h1 class="h1menu">Fotos</h1></a></li>
<li class="topmenu"><a href="index.php?s=links"><h1 class="h1menu">Links</h1></a></li>
<li class="topmenu"><a href="index.php?s=kontakt"><h1 class="h1menu">Kontakt</h1></a></li>
CSS:
Code:
html {
padding:0;
margin:0;
height:100%;
}
body {
width:1000px;
margin:0;
padding:0;
background:url(../img/bg.png) repeat;
margin-left:auto;
margin-right:auto;
height:100%;
border-right:1px solid black;
border-left:1px solid black;
}
#header {
width:1000px;
height:150px;
background:#fff url("../img/banner.png");
position:relative;
margin-top:0;
}
#header img {
padding-top:30px;
}
#menu {
position:relative;
background:url("../img/menu2.png") repeat-x;
width:1000px;
height:52px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:30px;
box-shadow:1px 1px 10px #333333;
}
#navi {
margin-left:auto;
margin-right:auto;
}
#navi li {
list-style:none;
}
.h1menu {
font-size:14px;
margin-top:15px;
text-shadow:#000 0px 0px 4px;
color:#fff496;
}
.topmenu a {
text-decoration:none;
float:left;
width:120px;
height:48px;
margin-left:10px;
margin-right:10px;
margin-top:2px;
}
.topmenu a:hover {
background:url("../img/hover.png") repeat-x;
}
#section {
position:relative;
width:900px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
background:#eefcff;
border:1px solid #000;
border-radius: 18px;
padding:6px;
box-shadow: 2px 2px 20px #000;
}
.clear {
clear:both;
}
Ich hoffe das ihr mir vielleicht bei meinem Problem/Frage helfen könnt 
Gruß
Critone
|
|
|
|
08/12/2013, 02:45
|
#2
|
elite*gold: 0
Join Date: Jun 2013
Posts: 405
Received Thanks: 84
|
Ich empfehle und benutze selber das Framework Twitter-Bootstrap.
Schau es dir einfach mal an. Bei Fragen kannst du mir ja mal eine PN zu kommen lassen.
|
|
|
|
|
08/12/2013, 09:00
|
#3
|
elite*gold: 0
Join Date: Oct 2009
Posts: 557
Received Thanks: 160
|
mal schnell eins in fiddle gemacht:
relativ simpel gestaltet und unschön formatiert, zeigt aber das Grundgerüsst für reines css:
|
|
|
|
|
08/12/2013, 09:16
|
#4
|
elite*gold: 0
Join Date: Jul 2008
Posts: 1,826
Received Thanks: 226
|
Allerdings für ein einfaches Dropdown Navi gleich ein Framework benutzen ist nicht nicht nötig.
Vorher solltest du allerdings dir nocheinmal die Grundlagen von HTML anschaun.
Eine Liste fängt immer mit einem <ul> // <ol> an.
Überschriften (h1/h2/h3) von jeder maximal eine auf einer Seite denn dies sind Überschriften!
[R.o.x] hat ein gutes Tutorial erstellt welche ich dir hier jett naheleg:
|
|
|
|
|
08/12/2013, 13:22
|
#5
|
elite*gold: 0
Join Date: Jun 2013
Posts: 405
Received Thanks: 84
|
Quote:
Originally Posted by dealaking
Allerdings für ein einfaches Dropdown Navi gleich ein Framework benutzen ist nicht nicht nötig.
Vorher solltest du allerdings dir nocheinmal die Grundlagen von HTML anschaun.
Eine Liste fängt immer mit einem <ul> // <ol> an.
Überschriften (h1/h2/h3) von jeder maximal eine auf einer Seite denn dies sind Überschriften!
[R.o.x] hat ein gutes Tutorial erstellt welche ich dir hier jett naheleg:
|
^Man nehme ganz einfach das dropdown.js aus dem Ordner. Dann nur noch verlinken und halt anpassen. 
Aber Jonas_39 hat schon den einfachsten und besten Vorschlag gebracht.
|
|
|
|
|
08/12/2013, 13:26
|
#6
|
elite*gold: 0
Join Date: Jul 2008
Posts: 1,826
Received Thanks: 226
|
Quote:
Originally Posted by lnqlorlouz
^Man nehme ganz einfach das dropdown.js aus dem Ordner. Dann nur noch verlinken und halt anpassen.
Aber Jonas_39 hat schon den einfachsten und besten Vorschlag gebracht. |
Ja das ist mir schon klar allerdings musst du immer auch von Nutzern ausgehen welche JavaScript deaktiviert haben und dort kommst du dann mit deiner .js Datei nicht weit 
Allerdings zählt das mehr und unterschiedlichen Meinungen denke ich 
|
|
|
|
|
08/12/2013, 14:45
|
#7
|
elite*gold: 149
Join Date: Feb 2010
Posts: 1,297
Received Thanks: 345
|
Danke für eure Hilfe. Ich habe mir das "HowTo" was dealaking empfohlen hatte mal angeguckt und habe mein Menü so verändert das es passt.
Screen:
Nur wenn ich auf z.b Angebote gehe sieht es so aus:
Problem: Das "ausgeklappte Menü" versteckt sich hinter einer Box...
Ich habe gelesen das man dies mit z-index lösen kann. Jedoch beschäftige ich mich erst seit kurzem mit CSS und weiß nicht wie genau ich dies jetzt lösen kann.
Index.php:
Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<link rel="stylesheet" type="text/css" href="css/style.css">#
<link rel="stylesheet" type="text/css" href="css/navi.css">
<title>XX</title>
</head>
<body>
<div class="clear">
<div id="header">
<center><img src="img/head.png" width="300px" height="80px"></center>
</div>
<div id="menu">
<?PHP include("navi.php"); ?>
</div>
<div id="section">
<?PHP
$includeDir = ".".DIRECTORY_SEPARATOR."pages".DIRECTORY_SEPARATOR;
$includeDefault = $includeDir."home.php";
if(isset($_GET['s']) && !empty($_GET['s']))
{
$_GET['s'] = str_replace("\0", '', $_GET['s']);
$includeFile = basename(realpath($includeDir.$_GET['s'].".php"));
$includePath = $includeDir.$includeFile;
if(!empty($includeFile) && file_exists($includePath))
{
include($includePath);
}
else
{
include($includeDefault);
}
}
else
{
include($includeDefault);
}
?>
</div>
</div>
</div>
</body>
</html>
navi.php
Code:
<ul id="navi">
<li><a href="index.php">Startseite</a></li>
<li><a href="index.php?s=oeffnung">Öffnungszeiten</a></li>
<li class="dropdown">Angebote
<ul>
<li><a href="#">Offener Treff</a><li>
<li><a href="#">Internetcafe</a></li>
<li><a href="#">Mädchentag</a></li>
<li><a href="#">Kindergruppe</a></li>
<li><a href="#">Schülerhilfe</a></li>
<li><a href="#">Job Office</a></li>
</ul>
<li class="dropdown">Fotos
<ul>
<li><a href="#">Offener Treff</a></li>
<li><a href="#">Kindergruppe</a></li>
<li><a href="#">Aufbau der Skateranlage</a></li>
<li><a href="#">Einweihung der Skateranlage</a></li>
<li><a href="#">Multifunktionsplatz 2003</a></li>
</ul>
<li><a href="index.php?s=links">Links</a></li>
<li><a href="index.php?s=kontakt">Kontakt</a></li>
</ul>
style.css
Code:
html {
padding:0;
margin:0;
height:100%;
}
body {
width:1000px;
margin:0;
padding:0;
background:url(../img/bg.png) repeat;
margin-left:auto;
margin-right:auto;
height:100%;
border-right:1px solid black;
border-left:1px solid black;
}
#header {
width:1000px;
height:150px;
background:#fff url("../img/banner.png") repeat-x;
position:relative;
margin-top:0;
}
#header img {
padding-top:30px;
}
#menu {
position:relative;
background:url("../img/menu2.png") repeat-x;
width:1000px;
height:52px;
margin-left:auto;
margin-right:auto;
text-align:center;
margin-top:30px;
box-shadow:1px 1px 10px #333333;
}
#section {
position:relative;
width:900px;
height:100%;
margin-left:auto;
margin-right:auto;
margin-top:30px;
background:#eefcff;
border:1px solid #000;
border-radius: 18px;
padding:6px;
box-shadow: 2px 2px 20px #000;
}
.clear {
clear:both;
}
navi.css
Code:
#navi {
list-style-type:none;
}
#navi li {
float:left;
position:relative;
list-style-type:none;
margin-left:10px;
margin-right:10px;
width:120px;
height:48px;
margin-top:2px;
}
#navi li.open, #navi li:hover {
background:url("../img/hover.png") repeat-x;
}
#navi .dropdown {
font-size:15px;
padding-top:15px;
text-shadow:#000 0px 0px 4px;
color:#fff496;
}
#navi li a {
display: block;
font-size:15px;
margin-top:15px;
text-shadow:#000 0px 0px 4px;
color:#fff496;
text-decoration: none;
}
#navi li ul {
display:none;
position:absolute;
top:48px;
left:0;
width:130px;
padding:0 0 5px;
background:#bbb;
border:solid #bbb;
}
#navi li:hover ul {
display:block;
}
#navi li ul li {
float:none;
}
#navi li ul li a {
padding:8px 10px;
display:inline-block;
}
#navi li ul li a {
display:block;
}
#navi li ul li a:hover {
background: #444;
color:#FFF;
}
Ich hoffe ihr könnt mir helfen ))
|
|
|
|
|
08/12/2013, 20:36
|
#8
|
elite*gold: 10
Join Date: Feb 2012
Posts: 313
Received Thanks: 61
|
Quote:
Originally Posted by dealaking
Eine Liste fängt immer mit einem <ul> // <ol> an.
Überschriften (h1/h2/h3) von jeder maximal eine auf einer Seite denn dies sind Überschriften!
|
Nur teilweise richtig, H1 sollte man nur einmal benutzen, den rest kann und sollte man öfters benutzen -> sofern es auch sinn macht.
|
|
|
|
|
08/12/2013, 20:49
|
#9
|
elite*gold: 0
Join Date: Oct 2009
Posts: 557
Received Thanks: 160
|
deinem menu gibst du einen höheren z-index wert als deiner section.
Bedenke, dass du für z-index eine position definieren musst.
|
|
|
|
|
08/13/2013, 00:28
|
#10
|
elite*gold: 25
Join Date: Apr 2010
Posts: 1,009
Received Thanks: 316
|
Quote:
|
Ja das ist mir schon klar allerdings musst du immer auch von Nutzern ausgehen welche JavaScript deaktiviert haben und dort kommst du dann mit deiner .js Datei nicht weit
|
Diese Ausrede ist veraltet und unbrauchbar. Firefox hat ja im neusten Build das deaktivieren sogar aus den Standardeinstellungen rausgenommen - du musst schon das Flag changen. Die einzigen die JS aus haben sind die die krumme Dinge ziehen wegen Angst von irgendwelchen Infos die gesammelt werden können, die sollten die Seite auch nicht nutzen können .
|
|
|
|
|
08/13/2013, 08:33
|
#11
|
elite*gold: 0
Join Date: Jul 2008
Posts: 1,826
Received Thanks: 226
|
Quote:
Originally Posted by Synatex
Diese Ausrede ist veraltet und unbrauchbar. Firefox hat ja im neusten Build das deaktivieren sogar aus den Standardeinstellungen rausgenommen - du musst schon das Flag changen. Die einzigen die JS aus haben sind die die krumme Dinge ziehen wegen Angst von irgendwelchen Infos die gesammelt werden können, die sollten die Seite auch nicht nutzen können . |
Das siehst du falsch, ich bin nur der Meinung eine Seite sollte ohne JavaScript auch funktionieren und ein Menü, ein einfaches Dropdown Menü, welches man über CSS lösen kann muss auf einer Seite ganz einfach auch ohne JavaScript funktionieren.
Quote:
|
Jedoch beschäftige ich mich erst seit kurzem mit CSS und weiß nicht wie genau ich dies jetzt lösen kann.
|
Lasst ihn doch erstmal die Grundlagen lernen und bombadiert ihn nicht gleich mit Frameworks, auf diese kann er sich gerne berufen wenn er die Grundlagen verstanden hat und anwenden kann.
|
|
|
|
|
08/13/2013, 13:26
|
#12
|
elite*gold: 0
Join Date: Jun 2013
Posts: 405
Received Thanks: 84
|
Quote:
Originally Posted by dealaking
Lasst ihn doch erstmal die Grundlagen lernen und bombadiert ihn nicht gleich mit Frameworks, auf diese kann er sich gerne berufen wenn er die Grundlagen verstanden hat und anwenden kann.
|
Frameworks können auch mal ganz hilfreich sein, da braucht man nicht immer unbedingt die Kenntnisse. Vor allem ist es eher eine Hilfe, weil dort Dropdown-Menüs etc. schon vorgefertigt sind. Und dort steht auch nochmal alles ganz einfach erklärt, wie was geht.
Es sind außerdem auch nur Tipps, keiner zwingt ihn dies zu benutzen!
Da sieht man schön, wie die Codes zum Teil kopier bereit sind. Aber ich will mich da nicht weiter einmischen, Jeder lernt auf seine Weise.
|
|
|
|
|
08/13/2013, 15:03
|
#13
|
elite*gold: 0
Join Date: Oct 2009
Posts: 557
Received Thanks: 160
|
+1 für Frameworks wegen Crossbrowser Kompatibilität und Einfachheit
+1 gegen Frameworks weil man nicht wirklich was bei lernt
=> Frameworks benutzen, wenn man weiß wie sie funktionieren (Y)
|
|
|
|
 |
Similar Threads
|
[Hilfe] Dropdown Menü
01/13/2013 - Web Development - 12 Replies
Also ich mache gerade ein Forum mit Mybb, jedoch wollte ich gerade ein Dropdownmenü in dem Texteditor machen wo sich ein Problem erwies.
So sieht das Dropdown menü aus:
http://i.epvpimg.com/tmzPf.png
So sollte es aussehe:
http://i.epvpimg.com/wTyYf.png
|
[HTML+CSS]How to Dropdown Menü erstellen
11/23/2011 - Coding Tutorials - 6 Replies
Hallo E*PVP,
ich möchte euch zeigen wie ihr ein eigenes Dropdown Menü erstellen könnt!
Ihr erstellt eine HTML Datei und bearbeitet die mit einem Editor eurer Wahl. NotePad++ wäre ein guter Editor. Dann erstellen wir erstmal das Grundgerüst beim HTML, welches aus diesen Bereichen aufgebaut ist :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-trans itional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="de" lang="de">
...
|
[PHP]Dropdown Menü funktion
07/25/2011 - Coding Tutorials - 6 Replies
Moin,
Habe jetzt nen Dropdown menü ;-)
Wie kann ich es machen wenn mann die option Blog auswählt dann auf Enter klickt das mann zur block.php weitergeleitet wird?
Gruß
|
Dropdown Menü
05/25/2010 - General Coding - 4 Replies
ich will an meiner Seite einen runden Button als Menü benutzen, das heißt wenn
man auf ihn drückt, soll sich ein Menü öffnen (so ähnlich wie ein Dropdown Menü nur nicht nach unten sondern zur Seite (links UND rechts) )
ich glaub das sowas möglich ist, weiß aber nicht wie man es genau macht...
könnt ihr mir vielleicht ein paar Tipps geben?
|
All times are GMT +2. The time now is 01:37.
|
|
![[PHP/CSS] Dropdown Menü - Hilfe](https://www.elitepvpers.com/forum/iconimages/web-development/php-css-dropdown-men-hilfe_ltr.gif){kind=small}
