"Bewegliche Menüleiste" Quellcodes oder Seiten
lima-city → Forum → Die eigene Homepage → Homepage Allgemein
akkordeon
all
browser
code
container
design
eigenschaft
entsprechen
http
kit
komischen linien
niemand
optische gestaltung
quellcode
suche
tun
url
vertreten
weben
zeiger
-
Hey,
ich bin mal wieder an meiner Homepage am weiter arbeiten und suche jetzt eine Bewegliche Menüleiste! Mein "PHP" ist noch nicht so gut und soweit ich glaube kann man mit PHP so was garnicht machen o.O
Also ich suche eine Menüleiste wo wenn man mit dem Zeiger drüber geht sich etwas nach unten öffnet oder es zB "blau" wird! Wenn ihr immernoch kein Bild von habt, ich habe hier mal eine Seite wo beides Vertreten wird: http://www.minecraft-mods.de/
Am besten währe wen ihr eine Seite oder ein Programm habt was "kostenlos" ist und wo man alles genau einstellen kann und das dann einfach den Code ausspuckt
Ich freue mich über jede Antwort
MFG
-
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
-
Klare Antwort: Du brauchst ein CMS
Sieh dich bitte bei Joomlaos um, denn soetwas selber zu proggen ist heutzutage nicht mehr aktuell.
Du brauchst ein horizontales "Akkordeon Menü".
So wie niemand (außer den waren Experten) mehr in C++ programmiert solltes niemand mehr versuchen Akkordeon Menüs selber zu schreiben... die gibts eben schon.
Such dir ein gutes CMS und fertig. -
ich probiere es gleich aus
Danke
MFG
- - - - - - - - - - - - - - - - - - - -
Ich verstehs nicht!
Die geben einen ja einen Quellcode! Wenn ich den jetzt in meinem Pogram unter Quellcode anzeigen einfüge dann speicher und dann zeigt der Text mit Links und mit Komischen Linien an!
Zeigt der das erst im Browser richtig an o.O
Ich probiere es mal aus.
- - - - - - - - - - - - - - - - - - - -
nein, ich habe es jetzt auf meine lima-city Homepage hochgeladen und ihr könnt ja mal gucken was dabei raus kommt: http://giga-score.lima-city.de/test.html
Das wahr der Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml2/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en"> <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script> <script type="text/javascript" src="ddaccordion.js"> /*********************************************** * Accordion Content script- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com) * Visit http://www.dynamicDrive.com for hundreds of DHTML scripts * This notice must stay intact for legal use ***********************************************/ </script> <script type="text/javascript"> ddaccordion.init({ headerclass: "headerbar", //Shared CSS class name of headers group contentclass: "submenu", //Shared CSS class name of contents group revealtype: "mouseover", //Reveal content when user clicks or onmouseover the header? Valid value: "click", "clickgo", or "mouseover" mouseoverdelay: 200, //if revealtype="mouseover", set delay in milliseconds before header expands onMouseover collapseprev: true, //Collapse previous content (so only one open at any time)? true/false defaultexpanded: [0], //index of content(s) open by default [index1, index2, etc] [] denotes no content onemustopen: true, //Specify whether at least one header should be open always (so never all headers closed) animatedefault: false, //Should contents open by default be animated into view? persiststate: true, //persist state of opened contents within browser session? toggleclass: ["", "selected"], //Two CSS classes to be applied to the header when it's collapsed and expanded, respectively ["class1", "class2"] togglehtml: ["", "", ""], //Additional HTML added to the header when it's collapsed and expanded, respectively ["position", "html1", "html2"] (see docs) animatespeed: "normal", //speed of animation: integer in milliseconds (ie: 200), or keywords "fast", "normal", or "slow" oninit:function(headers, expandedindices){ //custom code to run when headers have initalized //do nothing }, onopenclose:function(header, index, state, isuseractivated){ //custom code to run whenever a header is opened or closed //do nothing } }) </script> <style type="text/css"> .urbangreymenu{ width: 190px; /*width of menu*/ } .urbangreymenu .headerbar{ font: bold 13px Verdana; color: white; background: #606060 url(arrowstop.gif) no-repeat 8px 6px; /*last 2 values are the x and y coordinates of bullet image*/ margin-bottom: 0; /*bottom spacing between header and rest of content*/ text-transform: uppercase; padding: 7px 0 7px 31px; /*31px is left indentation of header text*/ } .urbangreymenu .headerbar a{ text-decoration: none; color: white; display: block; } .urbangreymenu ul{ list-style-type: none; margin: 0; padding: 0; margin-bottom: 0; /*bottom spacing between each UL and rest of content*/ } .urbangreymenu ul li{ padding-bottom: 2px; /*bottom spacing between menu items*/ } .urbangreymenu ul li a{ font: normal 12px Arial; color: black; background: #E9E9E9; display: block; padding: 5px 0; line-height: 17px; padding-left: 8px; /*link text is indented 8px*/ text-decoration: none; } .urbangreymenu ul li a:visited{ color: black; } .urbangreymenu ul li a:hover{ /*hover state CSS*/ color: white; background: black; } </style> <body> <div class="urbangreymenu"> <h3 class="headerbar"><a href="http://www.dynamicdrive.com/style/">CSS Library</a></h3> <ul class="submenu"> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links & Buttons</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a></li> <li><a href="http://www.dynamicdrive.com/style/csslibrary/all/">Browse All</a></li> </ul> <h3 class="headerbar"><a href="http://www.javascriptkit.com">JavaScript Kit</a></h3> <ul class="submenu"> <li><a href="http://www.javascriptkit.com/cutpastejava.shtml" >Free JavaScripts</a></li> <li><a href="http://www.javascriptkit.com/javatutors/">JavaScript tutorials</a></li> <li><a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></li> <li><a href="http://www.javascriptkit.com/dhtmltutors/">DHTML & CSS</a></li> <li><a href="http://www.javascriptkit.com/howto/">Web Design</a></li> <li><a href="http://www.javascriptkit.com/java/">Free Java Applets</a></li> </ul> </div> </body> </html>
Beitrag zuletzt geändert: 31.10.2011 10:17:20 von giga-score -
Vorab: Ein CMS bringt nur dann schöne Menüs, wenn das benutzte Template darauf ausgelegt ist. Willst Du ein eigenes Design, bist Du auch mit einem CMS wieder dort, wo Du jetzt bist. ;)
Das, was Du suchst, nennt sich übrigens Dropdown. Mit Accordion, wie demosites meint, hat das nichts zu tun.
Eine riesige Auswahl an CSS-Menüs in verschiedenster Form fiindest Du bei Stu Nicholls. Alle Beispiele sind im Quellcode dokumentiert. Schau dir die Kategorie Dropdown an dort findest Du auch Menüs, die deinem Beispiellink entsprechen. -
oukay,
ich verstehs nicht ganß!
wie meinst du das mit dem "darauf ausgelegt" wie lege ich das den darauf aus ?
MFG
-
Ganz einfach. Das eigentliche CMS ist nur dafür zuständig, die Listenstruktur der Navigation, aus den bestehenden Seiten zu generieren. Die Anordnung im Browser sowie Effekte wie Dropdown werden durch HTML und CSS des Templates gesteuert.
Wenn Du kein fertges Template nutzt, bzw. eines, daß ein Dropdown-Menü nicht vorsieht oder aber die optische Gestaltung deiner Website selbst erledigst, bist Du trotz CMS genötigt, das gewünschte Menü mit seinen Eigenschaften selbst zu gestalten. -
Diskutiere mit und stelle Fragen: Jetzt kostenlos anmelden!
lima-city: Gratis werbefreier Webspace für deine eigene Homepage
