Seite 1 von 2 12 LetzteLetzte
Ergebnis 1 bis 10 von 11

Thema: Problem: Dropdown-Menu gestalten

  1. #1
    HTML Newbie
    Registriert seit
    02.04.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard Problem: Dropdown-Menu gestalten

    Hallo liebe Community,


    ich bin erst seit einigen Tagen in der Welt von html und css. Bin also absolut noch in der Lernphase, aber bastel parallel zu meinen Lernfortschritten schon an einer Seite rum. Bei meinem Dropdown-menu in der Navigation bin ich aber jetzt auf Probleme gestoßen, zu denen ich keine Lösungen finde. Ich freue mich auch auf eine einzelne Lösung für eins der Probleme, da ich keinen Kurs besuche, keinen Lehrer habe und somit im Internet step-by-step (auch von dir ) lerne.


    Meine Probleme sind:


    1. Die Unterpunkte des Dropdowns (Link1,2,3 und Link 1.1,1.2,2.1 etc) sollen nur gehovert werden, wenn man mit der Maus auf dem Link ist. Momentan endet das Linkfeld mit der Schrift, gehovert wird aber bis rechts an den Rand. Das heißt man kann rechts von der Schrift mit der Maus hover-effekt auslösen, aber man befindet sich nicht auf dem Link.


    2. Es gelang mir nicht wirklich die momentan kleingeschriebenen, gelb markierten Untermenupunkte (Link 1.1,1.2, 2.1 etc) mit Befehlen anzusprechen. Wenn ich den Listpunkten eine ID gab, waren die Befehle an die ID wirkungslos, als Klasse konnte ich ihnen die kleinere Schrift und gelben Hintergrund geben, andere Befehle wie Padding, list-style-type und andere haben aber nicht funktioniert... Ich will im Endeffekt diese Unterpunkte einrücken, ihnen einen list-style-type geben, möglicherweise Schrifttyp ändern, und den Abstand nach oben verringern, damit sie klar als Unterpunkte zu Link1,2,3 erkennbar werden.


    3. Abstand zwischen den Unterpunkten (1.1, 1.2 etc) verringern (siehe oben), damit die Liste nicht so ellenlang ist. Ich geh davon aus, dass man das mit margin-top hinkriegt, sobald man die Listenpunkte einzeln ansprechen kann (Problem 2.)


    4. Wenn man auf die Übermenupunkte hovert, wird das Hoverfeld innerhalb 200ms geändert, das Dropdownmenu aber kommt sofort. Das soll auch innerhalb 200ms eingeblendet werden. Wenn ich den gleichen Befehl beim ul#navi_main li:hover>ul reinhab, hat es aber nichts geändert.


    Ich hoffe ihr könnt mir weiterhelfen, entweder mit dem lösenden Gesamtcode (den kann ich lesen, nachvollziehen und davon lernen) oder mit verbaler Erklärung, dann aber bitte mit den einzelnen Codes. Denn nur "mache das und das dort" (rein verbal) wird mir möglicherweise nicht helfen, wenn ich nicht weiß wie "das und das" geht.


    Freu mich schon auf hoffentlich hilfreiche Antworten.
    Unten habe ich html und css kopiert.


    ztukly28.jpg


    HTML-Editor-File:

    <nav id="navigation">
    <ul id="navi_main">
    <li class="Startseite"><a href="index.html">Startseite</a>
    </li>
    <li class="Inhalt"><a href="content.html">Inhalt</a>
    <ul class="dropdown_navi">
    <li><a href="#">Linkziel 1</a></li>
    <li><a href="#">Linkziel 2</a></li>
    <li><a href="#">Linkziel 3</a></li>
    </ul>
    </li>
    <li class="Angebot"><a href="offer.html">Angebot</a>
    <ul class="dropdown_navi">
    <li><a href="#">Linkziel 1</a></li>
    <li id="test" class="test"><a href="#">Linkziel 1.1</a></li>
    <li id="test" class="test"><a href="#">Linkziel 1.2</a></li>
    <li><a href="#">Linkziel 2</a></li>
    <li id="test" class="test"><a href="#">Linkziel 2.1</a></li>
    <li id="test" class="test"><a href="#">Linkziel 2.2</a></li>
    <li id="test" class="test"><a href="#">Linkziel 2.3</a></li>
    <li><a href="#">Linkziel 3</a></li>
    <li id="test" class="test"><a href="#">Linkziel 3.1</a></li>
    <li id="test" class="test"><a href="#">Linkziel 3.2</a></li>
    </ul>
    </li>
    <li class="about"><a href="about.html">Über mich</a>
    </li>
    <li class="kontakt"><a href="contact.html">Kontakt</a>
    </li>
    </ul>
    </nav>


    CSS-File:


    ul{
    list-style-type: none;
    }


    ul#navi_main{
    text-align: center;
    font-weight: bold;
    }


    ul#navi_main a{
    text-decoration: none;
    color: black;
    }


    ul#navi_main a:hover{
    text-decoration: none;
    }


    ul#navi_main li{
    float: left;
    position: relative;
    list-style-type: none;
    margin-top: 15px;
    margin-left: 10px;
    line-height: 30px;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    }


    ul#navi_main li.startseite{
    width: 100px;
    height: 30px;
    }


    ul#navi_main li.inhalt{
    width: 100px;
    height: 30px;
    }


    ul#navi_main li.angebot{
    width: 100px;
    height: 30px;
    }


    ul#navi_main li.about{
    width: 100px;
    height: 30px;
    }


    ul#navi_main li.kontakt{
    width: 100px;
    height: 30px;
    }


    ul#navi_main li.startseite:hover{
    width: 100px;
    height: 30px;
    background: #BFBFBF;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #000000;
    -webkit-transition: all 200ms ease-in;
    -moz-transition: all 200ms ease-in;
    -ms-transition: all 200ms ease-in;
    -o-transition: all 200ms ease-in;
    transition: all 200ms ease-in;
    }


    ul#navi_main li.inhalt:hover{
    width: 100px;
    height: 30px;
    background: #BFBFBF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 3px 3px 3px #000000;
    }


    ul#navi_main li.angebot:hover{
    width: 100px;
    height: 30px;
    background: #BFBFBF;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    box-shadow: 3px 3px 3px #000000;
    }


    ul#navi_main li.about:hover{
    width: 100px;
    height: 30px;
    background: #BFBFBF;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #000000;
    }


    ul#navi_main li.kontakt:hover{
    width: 100px;
    height: 30px;
    background: #BFBFBF;
    border-radius: 10px;
    box-shadow: 3px 3px 3px #000000;
    }


    ul#navi_main li ul.dropdown_navi{
    background: #BFBFBF;
    position: absolute;
    left: 0;
    top: 30px;
    width: 150px;
    padding: 0px;
    border-top-right-radius: 10px;
    border-bottom-left-radius: 10px;
    border-bottom-right-radius: 10px;
    box-shadow: 3px 3px 3px #000000;
    }


    ul#navi_main li ul li{
    float: none;
    text-align: left;
    display: block;
    padding: 0px;
    height: 20px;
    line-height: 20px;
    }


    ul#navi_main li ul li:hover{
    float: none;
    text-align: left;
    display: block;
    background: #EFEFEF;
    padding: 0px;
    }


    ul#navi_main li>ul{
    display: none;
    }


    ul#navi_main li:hover>ul{
    display: block;
    }


    .test{
    list-style-type: disc;
    list-style-position: inside;
    background: #FFFF00;
    padding-left: 5px;
    font-size: 10px;
    color: #00FFDF;
    }


    #test{
    list-style-type: disc;
    list-style-position: inside;
    background: #FFFF00;
    padding-left: 5px;
    font-size: 10px;
    color: #00FFDF;
    }
    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
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    ID's dürfen nur einmal vorkommen. Den ID "#test" gibt es bei dir mehrmals.
    Weshalb verwendest du einheitlich eine ID und eine Class "test"? Das kann man doch alles auch in einer Class zusammenfassen.

    Sieh dir mal diese Basisanleitung an und passe sie deinen Bedürfnissen an.

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    Erstmal Danke für den Link, ich bin diese Anleitung natürlich durchgegangen und hab damit rumprobiert. Und es ist mir gelungen alles so zu gestalten, wie ich es mir vorstelle, bis auf eine Ausnahme:
    Wie kann ich den Obermenupunkt im gehoverten Zustand lassen, wenn ich mit der Maus den Obermenupunkt verlasse und ins Dropdownmenu runterwandere?

    Zur Erklärung und Info noch:
    1. Ich hatte ID und Class "test" drin gelassen, weil ich beides mal ausprobiert hatte.
    2. Danke für solche Erklärungen wie, dass IDs nur einmal verwendet werden können (aus solchen Hinweisen kann man allgemeines lernen). Könntest du diese Regel aber genauer definieren. Denn jetzt in meiner neuen Navigation habe ich wieder mehrere IDs verwendet und funktioniert. Teils in der selben UL, teils in unterschiedlichen ULs. Beides funktioniert momentan bei mir.

  4. #4
    Prinz(essin)
    Registriert seit
    26.03.2013
    Beiträge
    835
    Danke
    20
    Bekam 76 mal "Danke" in 75 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    Crossposting nennt man das, wenn man in in mehr als 1 Forum dasselbe postet. Ich hoffe du lässt das in Zukunft, da es nicht gern gesehen wird.

  5. #5
    Kaiser(in)
    Registriert seit
    24.04.2006
    Ort
    Ludwigshafen
    Beiträge
    2.720
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    Das ist eine Definitionssache, dass eine ID-Bezeichnung pro Seite nur einmal vorkommen darf, siehe z.B.
    http://de.selfhtml.org/css/formate/z...ividualformate
    http://www.friedels-home.de/index.ht...eil01/009.html

    Manche Browser sind "großzügig" und stören sich nicht daran, wenn ein ID auf einer Seite mehrmals vorkommt.
    Generell solltest du dich aber an die Definitionen halten, um von vornherein mögliche Probleme zu vermeiden.

    hover bezieht sich auf den Vorgang wo man "mit der Maus über einen Bereich fährt".
    Sobald du den Bereich mit der Maus wieder verlässt, endet auch der Hovervorgang.

  6. #6
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    Zitat Zitat von explanator
    Crossposting nennt man das, wenn man in in mehr als 1 Forum dasselbe postet. Ich hoffe du lässt das in Zukunft, da es nicht gern gesehen wird.
    Werde ich unterlassen in Zukunft. Ist allerdings schade, weil das lediglich bedeutet, dass ich weniger Infos von geringerer Zahl unterschiedlicher Leute erhalten kann.

    Zitat Zitat von sejuma
    Manche Browser sind "großzügig" und stören sich nicht daran, wenn ein ID auf einer Seite mehrmals vorkommt.
    Ah, das bedeutet es wird bei mir momentan richtig angezeigt, aber nicht bei allen Browsern? Also ist es keine vernünftige Lösung so wie ich es momentan habe.

    Zitat Zitat von sejuma
    hover bezieht sich auf den Vorgang wo man "mit der Maus über einen Bereich fährt". Sobald du den Bereich mit der Maus wieder verlässt, endet auch der Hovervorgang.
    Genau, deshalb denke ich mir ich brauche einen Befehl, der (mit Worten ausgedrückt) in etwa sagt "Wenn das Dropmenu gehovert wird, verändert sich das Aussehen des Obermenupunkts".

    Danke für die Links übrigens.

  7. #7
    Bandit
    Gast

    Standard AW: Problem: Dropdown-Menu gestalten

    Zitat Zitat von CooKie_KO Beitrag anzeigen
    Ist allerdings schade, weil das lediglich bedeutet, dass ich weniger Infos von geringerer Zahl unterschiedlicher Leute erhalten kann.
    Ich darf mal aus einem anderen Forum zitieren, wo das Thema Crossposting gut erklärt ist:
    Crossposting
    Crossposting bedeutet, dass ein und dieselbe Frage in mehreren Foren oder Newsgroups gleichzeitig gestellt wird. Ein solches Verhalten wird von den meisten Helfern nicht toleriert, denn damit stellst Du einerseits die Kompetenz der Helfer jedes einzelnen Forums und Newsgroup in Frage und bewirkst zudem, dass ein zig-faches an Stunden aufgewendet wird, um nur ein einziges Problem zu lösen, denn überall werden sich die Helfer daran setzen, eine Lösung für Dich zu finden. Das ist ganz klar ein Missbrauch an dem kostenlosen und freiwilligen Support, der hier angeboten wird. Wenn Deine Frage klar und deutlich gestellt wurde, dann wirst Du ganz bestimmt innerhalb kürzester Zeit eine Antwort erhalten. Sollte dies auch nach mehreren Tagen nicht der Fall sein, dann versuche bitte die Frage besser zu formulieren. Falls Du dennoch in einem zweiten Forum posten solltest, erwähne bitte, dass Du die Frage schon woanders gestellt hast, und dass Du es tust, weil keine Lösung gefunden werden konnte.

  8. #8
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    @Bandit:
    Ich gehe eigentlich ungern weiter auf das Crossposting ein und bin auch nicht bemüht hier in Missgunst zu fallen, kann dem Zitat aber nicht zustimmen, da es (wie es mir scheint) besonders in der HTML-Welt viele Wege zum Ziel gibt und ich somit keineswegs die Kompetenz der Helfer anzweifle. Denn bei 10 mal die selbe Frage wird man 10 verschiedene Antworten bekommen, da es unterschiedliche Lösungsansätze gibt. Also ganz im Gegenteil: Ich freue mich auf unterschiedliche Antworten und lerne besser verstehen wie es funktioniert, wenn ich die unterschiedlichen Möglichkeiten und ihre Wirkungsweise erfahre.
    Desweiteren beanspruche ich damit auch nicht mehr Zeit, da ich selbstverständlich einen Post aktualisiere, falls sich Probleme (teil-)gelöst haben, sei es durch einen Helfer aus einer anderen Community oder durch Eigenrecherche und -probieren. Es wird also nicht vorkommen, dass sich Leute im Forum A mit einem Problem Zeit nehmen, das in Forum B schon gelöst wurde.
    Deshalb bitte ich um Verständnis, dass ich das Thema Dropdown-Menu jetzt nicht abbreche, sondern auf den aktuellen Stand bringe, um eben genau jene Zeitverschwendung zu verhindern.



    Aktueller Stand:
    Mit einer neuen Listenstruktur, an der ich rumprobiert habe, ist es mir gelungen alles so zu gestalten, wie ich es mir vorstelle. Bei dieser anderen Struktur ist jetzt der Obermenupunkt aber nicht mehr im gehoverten Design, wenn ich die Maus auf die Untermenupunkte bewege. Wie kann ich denn die übergeordneten Listenpunkte ansprechen, wenn die untergeordneten Listenpunkte gehovert werden?


    Hier ist das momentane Zwischenergebnis zu sehen:
    http://jsfiddle.net/a2TnK/


    (Ich bin bereits darauf hingewiesen worden, dass die ID-Vergabe an mehrere Listen nicht bei allen Browsern funktioniert (Danke hier an Sejuma). Wenn ich das selbe mit Klassen probiere, funktioniert es bei mir nicht. Diesbzgl. muss ich mir also noch was anderes überlegen oder jemand hat einen Hinweis)

  9. #9
    HTML Newbie
    Themenstarter

    Registriert seit
    02.04.2013
    Beiträge
    5
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Problem: Dropdown-Menu gestalten

    Ich habe in einem anderen Thread gelesen, dass es damit zu tun hat, ob die Liste oder der Link angesteuert wird. Das war mein Problem, ich wusste zu Beginn nur nicht, wie ich daran was ändern muss. Hab es aber mittlerweile rausgekriegt und kann alles so gestalten, wie es mir in den Sinn kommt. Für diejenigen, die vllt irgendwann auf diesen Thread stoßen und auch nach einer Lösung suchen, so sieht aktuell mein html und css aus und damit bleibt der Oberpunkt gehovert:
    http://jsfiddle.net/PeFrG/


    Damit kann man von mir aus den Thread schließen. Ich vermute, dass mein html und css außer den Sachen, auf die ich mich konzentriert habe sie zum Laufen zu bringen, wahrscheinlich sehr schlecht/unpraktisch/unfunktionell für andere browser uvm ist. Insofern würde ich mich trotzdem über PNs mit Hinweisen, Verbesserungsvorschlägen und Tipps freuen.

  10. #10
    König(in)
    Registriert seit
    07.02.2009
    Ort
    Leipzig
    Beiträge
    1.391
    Danke
    2
    Bekam 21 mal "Danke" in 20 Postings

    Standard AW: Problem: Dropdown-Menu gestalten


Ähnliche Themen

  1. DropDown Auswahl Menu
    Von Rönix im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 2
    Letzter Beitrag: 11.04.2010, 18:17
  2. Dropdown-Menu mit Javascript
    Von visitor im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 5
    Letzter Beitrag: 16.01.2009, 20:56
  3. Dropdown Menu geht nur im FF nicht
    Von minder im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 05.07.2008, 16:43
  4. HTML DropDown Menu
    Von Bash im Forum HTML & CSS Forum
    Antworten: 16
    Letzter Beitrag: 09.04.2007, 04:55
  5. Problem mit Menu
    Von newstyle im Forum HTML & CSS Forum
    Antworten: 15
    Letzter Beitrag: 17.08.2005, 11:06

Stichworte

Berechtigungen

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