Ergebnis 1 bis 8 von 8

Thema: Dropdown Navigation

  1. #1
    TheNewOne
    Gast

    Standard Dropdown Navigation

    Hallo!
    Ich hoffe ich bin hier im richtigen Bereich des Forums. Naja ich frag einfach mal
    Ich möchte ein Dropdown Menü bei mir auf der Homepage machen! Ich habe auch schon einen Code etc. dafür gefunden. Allerdings möchte ich nicht nur ein Bild haben und als Rollover eine Farbe,sondern ein zweites Bild.

    Beispiel:

    Main Navi
    (dropped runter)
    News

    So wenn man jetzt über den Newsbutton fährt hatte ich gerne ein anderes Bild...ist jetzt ein dummes Beispiel,weiß aber nicht,wie ich es sonst beschreiben soll. Der Newsbutton wird dann z.B zu "NewsNews"

    Hoffe ihr versteht was ich meine und könnt mir helfen

    Mfg
    Achtung: Dies ist ein alter Thread im HTML und Webmaster Forum
    Diese Diskussion ist älter als 90 Tage. Die darin enthaltenen Informationen sind möglicherweise nicht mehr aktuell. Erstelle bitte zu deiner Frage ein neues Thema im Forum !!!!!

  2. #2
    Jedi Ritter Avatar von Dodo
    Registriert seit
    26.04.2008
    Ort
    Wien
    Alter
    27
    Beiträge
    3.774
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings
    Blog-Einträge
    1

    Standard

    verwend doch hintergrundbilder?
    Something big is coming. And there will be pirates and ninjas and unicorns...

  3. #3
    TheNewOne
    Gast

    Standard

    wie jetzt?versteh ich nicht ganz was du meinst sry!

  4. #4
    Forum Guru Avatar von The User
    Registriert seit
    28.10.2007
    Ort
    Zwischen Pazifik und Atlantik...
    Beiträge
    4.044
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard

    Schick mal einen Link zu dem Code.
    Also bei der CSS-Angabe für einen Unterpunkt setzt du einfach rein:
    Code:
    backgorund: url('bild2.png');

  5. #5
    TheNewOne
    Gast

    Standard

    Hi....Ich wollte das ganze mit einem Javascript machen:
    Code:
    <style type="text/css">
    
    #dropmenudiv&#123;
    position&#58;absolute;
    border&#58;1px solid black;
    border-bottom-width&#58; 0;
    font&#58;normal 12px Verdana;
    line-height&#58;18px;
    z-index&#58;100;
    &#125;
    
    #dropmenudiv a&#123;
    width&#58; 100%;
    display&#58; block;
    text-indent&#58; 3px;
    border-bottom&#58; 1px solid black;
    padding&#58; 1px 0;
    text-decoration&#58; none;
    font-weight&#58; bold;
    &#125;
    
    #dropmenudiv a&#58;hover&#123; /*hover background color*/
    background-color&#58; yellow;
    &#125;
    
    </style>
    
    <script type="text/javascript">
    
    /***********************************************
    * AnyLink Drop Down Menu- © Dynamic Drive &#40;www.dynamicdrive.com&#41;
    * This notice MUST stay intact for legal use
    * Visit http&#58;//www.dynamicdrive.com/ for full source code
    ***********************************************/
    
    //Contents for menu 1
    var menu1=new Array&#40;&#41;
    menu1&#91;0&#93;='JavaScript Kit'
    menu1&#91;1&#93;='Freewarejava.com'
    menu1&#91;2&#93;='Coding Forums'
    menu1&#91;3&#93;='CSS Drive'
    
    //Contents for menu 2, and so on
    var menu2=new Array&#40;&#41;
    menu2&#91;0&#93;='CNN'
    menu2&#91;1&#93;='MSNBC'
    menu2&#91;2&#93;='BBC News'
    
    var menuwidth='165px' //default menu width
    var menubgcolor='lightyellow' //menu bgcolor
    var disappeardelay=250 //menu disappear speed onMouseout &#40;in miliseconds&#41;
    var hidemenu_onclick="yes" //hide menu when user clicks within menu?
    
    /////No further editting needed
    
    var ie4=document.all
    var ns6=document.getElementById&&!document.all
    
    if &#40;ie4||ns6&#41;
    document.write&#40;'<div id="dropmenudiv" style="visibility&#58;hidden;width&#58;'+menuwidth+';background-color&#58;'+menubgcolor+'" onMouseover="clearhidemenu&#40;&#41;" onMouseout="dynamichide&#40;event&#41;"></div>'&#41;
    
    function getposOffset&#40;what, offsettype&#41;&#123;
    var totaloffset=&#40;offsettype=="left"&#41;? what.offsetLeft &#58; what.offsetTop;
    var parentEl=what.offsetParent;
    while &#40;parentEl!=null&#41;&#123;
    totaloffset=&#40;offsettype=="left"&#41;? totaloffset+parentEl.offsetLeft &#58; totaloffset+parentEl.offsetTop;
    parentEl=parentEl.offsetParent;
    &#125;
    return totaloffset;
    &#125;
    
    function showhide&#40;obj, e, visible, hidden, menuwidth&#41;&#123;
    if &#40;ie4||ns6&#41;
    dropmenuobj.style.left=dropmenuobj.style.top="-500px"
    if &#40;menuwidth!=""&#41;&#123;
    dropmenuobj.widthobj=dropmenuobj.style
    dropmenuobj.widthobj.width=menuwidth
    &#125;
    if &#40;e.type=="click" && obj.visibility==hidden || e.type=="mouseover"&#41;
    obj.visibility=visible
    else if &#40;e.type=="click"&#41;
    obj.visibility=hidden
    &#125;
    
    function iecompattest&#40;&#41;&#123;
    return &#40;document.compatMode && document.compatMode!="BackCompat"&#41;? document.documentElement &#58; document.body
    &#125;
    
    function clearbrowseredge&#40;obj, whichedge&#41;&#123;
    var edgeoffset=0
    if &#40;whichedge=="rightedge"&#41;&#123;
    var windowedge=ie4 && !window.opera? iecompattest&#40;&#41;.scrollLeft+iecompattest&#40;&#41;.clientWidth-15 &#58; window.pageXOffset+window.innerWidth-15
    dropmenuobj.contentmeasure=dropmenuobj.offsetWidth
    if &#40;windowedge-dropmenuobj.x < dropmenuobj.contentmeasure&#41;
    edgeoffset=dropmenuobj.contentmeasure-obj.offsetWidth
    &#125;
    else&#123;
    var topedge=ie4 && !window.opera? iecompattest&#40;&#41;.scrollTop &#58; window.pageYOffset
    var windowedge=ie4 && !window.opera? iecompattest&#40;&#41;.scrollTop+iecompattest&#40;&#41;.clientHeight-15 &#58; window.pageYOffset+window.innerHeight-18
    dropmenuobj.contentmeasure=dropmenuobj.offsetHeight
    if &#40;windowedge-dropmenuobj.y < dropmenuobj.contentmeasure&#41;&#123; //move up?
    edgeoffset=dropmenuobj.contentmeasure+obj.offsetHeight
    if &#40;&#40;dropmenuobj.y-topedge&#41;<dropmenuobj.contentmeasure&#41; //up no good either?
    edgeoffset=dropmenuobj.y+obj.offsetHeight-topedge
    &#125;
    &#125;
    return edgeoffset
    &#125;
    
    function populatemenu&#40;what&#41;&#123;
    if &#40;ie4||ns6&#41;
    dropmenuobj.innerHTML=what.join&#40;""&#41;
    &#125;
    
    function dropdownmenu&#40;obj, e, menucontents, menuwidth&#41;&#123;
    if &#40;window.event&#41; event.cancelBubble=true
    else if &#40;e.stopPropagation&#41; e.stopPropagation&#40;&#41;
    clearhidemenu&#40;&#41;
    dropmenuobj=document.getElementById? document.getElementById&#40;"dropmenudiv"&#41; &#58; dropmenudiv
    populatemenu&#40;menucontents&#41;
    
    if &#40;ie4||ns6&#41;&#123;
    showhide&#40;dropmenuobj.style, e, "visible", "hidden", menuwidth&#41;
    dropmenuobj.x=getposOffset&#40;obj, "left"&#41;
    dropmenuobj.y=getposOffset&#40;obj, "top"&#41;
    dropmenuobj.style.left=dropmenuobj.x-clearbrowseredge&#40;obj, "rightedge"&#41;+"px"
    dropmenuobj.style.top=dropmenuobj.y-clearbrowseredge&#40;obj, "bottomedge"&#41;+obj.offsetHeight+"px"
    &#125;
    
    return clickreturnvalue&#40;&#41;
    &#125;
    
    function clickreturnvalue&#40;&#41;&#123;
    if &#40;ie4||ns6&#41; return false
    else return true
    &#125;
    
    function contains_ns6&#40;a, b&#41; &#123;
    while &#40;b.parentNode&#41;
    if &#40;&#40;b = b.parentNode&#41; == a&#41;
    return true;
    return false;
    &#125;
    
    function dynamichide&#40;e&#41;&#123;
    if &#40;ie4&&!dropmenuobj.contains&#40;e.toElement&#41;&#41;
    delayhidemenu&#40;&#41;
    else if &#40;ns6&&e.currentTarget!= e.relatedTarget&& !contains_ns6&#40;e.currentTarget, e.relatedTarget&#41;&#41;
    delayhidemenu&#40;&#41;
    &#125;
    
    function hidemenu&#40;e&#41;&#123;
    if &#40;typeof dropmenuobj!="undefined"&#41;&#123;
    if &#40;ie4||ns6&#41;
    dropmenuobj.style.visibility="hidden"
    &#125;
    &#125;
    
    function delayhidemenu&#40;&#41;&#123;
    if &#40;ie4||ns6&#41;
    delayhide=setTimeout&#40;"hidemenu&#40;&#41;",disappeardelay&#41;
    &#125;
    
    function clearhidemenu&#40;&#41;&#123;
    if &#40;typeof delayhide!="undefined"&#41;
    clearTimeout&#40;delayhide&#41;
    &#125;
    
    if &#40;hidemenu_onclick=="yes"&#41;
    document.onclick=hidemenu
    
    </script>
    so und hier
    Code:
    menu1&#91;0&#93;='JavaScript Kit'
    möchte ich nicht nur den link haben sondern ein bild und ein over,was ganz anders aussieht^^
    hoffe ihr versteht was ich meine

    Danke

  6. #6
    TheNewOne
    Gast

    Standard

    Keiner eine idee?

  7. #7
    Forum Guru Avatar von synaptic
    Registriert seit
    20.06.2007
    Ort
    Butzbach-Wiesental
    Beiträge
    10.901
    Danke
    45
    Bekam 48 mal "Danke" in 46 Postings
    Blog-Einträge
    1

    Standard

    probier deine hoverdings mit css zu realisieren, du kannst links ja hintergrundbilder zuweisen und das geht für a und a:hover
    KEIN support via pn, email, messenger oder falsch geposteten threads
    Futter für deine Schnuffelzwerge gibts bei den Schnuffelzwergen TOP Qualität, also klicken und kaufen

  8. #8
    TheNewOne
    Gast

    Standard

    hi!du tut mir leid,aber versteh nicht wie ich das machen muss xD .... gibt's dafür vllt irgendwo eine anleitung ;D

Ähnliche Themen

  1. DropDown mit CSS
    Von wernerdeluxe im Forum HTML & CSS Forum
    Antworten: 3
    Letzter Beitrag: 15.08.2008, 17:10
  2. css js dropdown menü
    Von st0ny im Forum HTML & CSS Forum
    Antworten: 10
    Letzter Beitrag: 16.10.2007, 18:26
  3. Tabelle als Dropdown??
    Von help mee im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 05.10.2007, 15:38
  4. dropdown Menü
    Von wurmax im Forum HTML & CSS Forum
    Antworten: 1
    Letzter Beitrag: 16.11.2006, 21:33
  5. Dropdown mit JS überprüfen
    Von Lord Byron im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 1
    Letzter Beitrag: 06.06.2005, 16:00

Stichworte

Berechtigungen

  • Neue Themen erstellen: Nein
  • Themen beantworten: Nein
  • Anhänge hochladen: Nein
  • Beiträge bearbeiten: Nein
  •