zurück zur Startseite
  


Zurück XHTMLforum > (X)HTML und CSS > CSS
Seite neu laden CSS Dropdown-Menü? Wie gehts richtig?

Antwort
 
LinkBack Themen-Optionen Ansicht
  #1 (permalink)  
Alt 18.05.2013, 19:44
Neuer Benutzer
neuer user
Thread-Ersteller
 
Registriert seit: 18.05.2013
Beiträge: 2
hackt1sch befindet sich auf einem aufstrebenden Ast
Standard CSS Dropdown-Menü? Wie gehts richtig?

Hi ich habe folgendes Problem, ich will das sich mein Dropdown-Menue nicht nach unten sondern zur Seite ausklappt. Praktisch wie hier nur eben unterhalb.

cssplay.co.uk/menus/cssplay-showup.html

Mein bisheriges Dropdown-Menue findet ihr hier: [HTML] gf.net side menue - Pastebin.com Wie kann ich diesen Code umarbeiten? Denn wenn ich versuche alles in eine li zu schreiben klappt sich das Menue trotzdem nach unten auf und nicht zur Seite.

Vielen Dank für Hilfe
Mit Zitat antworten
Sponsored Links
  #2 (permalink)  
Alt 19.05.2013, 13:35
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Da das Menü wohl etwas kompliziert erscheint, habe ich dir mal die Lösung vorgegeben und alles farblich markiert und mit Rahmen versehen.
Auf diese Weise siehst du was sich wo auswirkt.

HTML-Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Menübeispiel</title>

<style>
body {
    background-color:FFFFFF;
}
   
#navMenu {
    margin:0;          
    padding:0; 
    width:700px; 
    height:30px;
    border: 1px solid blue;
}  
        
#navMenu ul {   
    border:1px;       
    margin:0;          
    padding:0;          
    line-height:30px;         
}  
       
#navMenu ul li {          
    margin:0;          
    padding:0;          
    list-style:none;          
    float:left;          
    position:relative;  
    font-family:Verdana; 
    color:orange;       
} 
        
#navMenu ul li a {  
    font-family:Verdana;         
    text-decoration:none;          
    text-align:left;                    
    display:block;
    float:left;  
    color: green;   
} 
        
#navMenu ul ul {      
    border: 1px solid red;      
    position:absolute;            
    top:30px; 
    left:-1px;
    heigth: 1.2em;
    width:600px;           
    visibility:hidden;
} 

#navMenu ul ul li{    
    padding:0 5px;
}     

#navMenu ul li:hover ul, #navMenu li:hover {             
    visibility:visible; 
    background:lightgrey; 
}  
        
#navMenu ul li a:hover{
    color:yellow;
}       

   
</style>  

</head>        
  <body>            
    <div id="navMenu">      
      <ul>          
        <li>
        <span class="std">MEHR</span>              
        <ul>                  
          <li>
          <a class="std" href="#"></a>
          </li>                  
          <li>
          <a class="std" href="./projekte.html" target="_top">Projektanfrage</a>
          </li>                  
          <li>
          <a class="std" href="./cartoons.html" target="_top">Cartoons</a>
          </li>
          <li>
          <a class="std" href="./artikel.html" target="_top">Artikel</a>
          </li>    
          <li>
          <a class="std" href="./ver-art.html" target="_top">Veröffentlichungen</a>
          </li>            
        </ul>          
        </li>      
      </ul>    
    </div>
    <div>
        <p>hallo</p>
    </div>
</body>

</html>
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #3 (permalink)  
Alt 19.05.2013, 16:16
Benutzer
neuer user
 
Registriert seit: 05.05.2013
Beiträge: 37
CaptainGerrard befindet sich auf einem aufstrebenden Ast
Standard

wobei er sich den NavMenu Container sparen kann und direkt das UL ansprechen kann, nicht wahr?

Font-Family gibt man nicht dem li UND dem a, poste dass einem Anfänger doch einfach direkt im Body, mehr CSS Angaben verwirren doch nur!
Des weiteren würde ich einheitlich auf Abstände zw. CSS Eigenschaft und Wert achten, andere User werden dir danken!
Mit Zitat antworten
  #4 (permalink)  
Alt 20.05.2013, 10:30
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Zitat:
Zitat von CaptainGerrard Beitrag anzeigen
wobei er sich den NavMenu Container sparen kann und direkt das UL ansprechen kann, nicht wahr?
Stimmt, kann man, wollte aber nicht so viel ändern, sondern Anhand seines bestehendes Menüs zeigen, wie es geht, sonst wird es zu verwirrend.
Zitat:
Font-Family gibt man nicht dem li UND dem a, poste dass einem Anfänger doch einfach direkt im Body, mehr CSS Angaben verwirren doch nur!
Die Fontangaben im Body würden sich auf die gesamte Seite auswirken.
Er soll ja was dabei lernen und sehen welche Auswirkungen Änderungen im CSS nach sich ziehen und zwar auf sein Menü bezogen. Sonst könnte man ja gleich alles neu schreiben und vorgeben wie es richtig geht, aber ob das dann so hilfreich ist?
Zitat:
Des weiteren würde ich einheitlich auf Abstände zw. CSS Eigenschaft und Wert achten, andere User werden dir danken!
Werde mir nächstes mal mehr Mühe geben, Danke jedenfalls für den Hinweis.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #5 (permalink)  
Alt 20.05.2013, 12:49
Benutzerbild von hubspe
Eisen 7 ole....
XHTMLforum-Kenner
 
Registriert seit: 22.06.2007
Ort: Passau
Beiträge: 7.087
hubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblickhubspe ist ein wunderbarer Anblick
Standard

Zitat:
Zitat von explanator Beitrag anzeigen
visibility:hidden;
auf diese Art das Submenü auszublenden ist leider keine gute Idee. Die screenreader lesen es dann nicht mehr vor.

Es ist doch so einfach ein submenü mittels pos. abs. und left-9999px auszublenden und dann per left:auto wieder einzublenden.

[ot] *seufz* Immer wieder erstaunlich wie lange sich dieser display:none/visibility/hidden-Unfug hält. Geradezu unausrottbar, dabei ist es doch so einfach es zugänglicher zu machen. [/ot]
__________________
Ein mehrfacher Gruß aus dem Südosten
Klaus
Mit Zitat antworten
  #6 (permalink)  
Alt 20.05.2013, 20:53
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Zum Ausblenden für Screenreader habe ich schomal geschrieben -- es kommt immer darauf an.

Das "Menü", das ich hier sehe, ist nicht nur für Screenreader, sondern auch für Tastaturbenutzer und per "touch" unzugänglich. Kann man sich das noch erlauben?
Eine wirklich einfache Lösung wäre: Der "Trigger", der jetzt ein nutzloses span ist, wird ein Link, dessen Ziel eine Seite ist, auf der alle "Sublinks" gelistet werden.
Für Maus-User ist das Dropdown dann eine schnelle Zusatz-Navigation, alle anderen haben den Link.
Mit Zitat antworten
  #7 (permalink)  
Alt 20.05.2013, 22:17
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

@fricca
Du schreibst ja in deinem anderen post:
Zitat:
...dass man sich ja nicht mehr darauf verlassen kann, dass es etwas wie :hover überhaupt noch gibt,...
Wie ist das zu verstehen?
Bis jetzt waren die Browser ja immer sehr tolerant was Abwärtskompatibilität angeht.
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
  #8 (permalink)  
Alt 20.05.2013, 22:24
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Touchscreens kennen bisher kein hover. Für einige Konstellationen wird bei manchen Geräten hover simuliert; wenn der Trigger kein Link ist weiß ich nicht, ob es überhaupt irgendwo eine Reaktion gibt.
Mit Zitat antworten
  #9 (permalink)  
Alt 20.05.2013, 22:34
?!?
XHTMLforum-Kenner
 
Registriert seit: 20.03.2013
Beiträge: 1.638
explanator sorgt für eine eindrucksvolle Atmosphäreexplanator sorgt für eine eindrucksvolle Atmosphäre
Standard

Prima.

Für iOS-Geräte kann man ja zusätzlich dem Element onclick = "void(0)" mitgeben, wie Apple auf seiner Developper-Seite empfiehlt. Ist das eigentlich ein sinnvolles Vorgehen, das auch bei Android funktioniert?
Oder hat man hier dann das Problem, das dass wieder nur eine Applekonforme Vorgehensweise ist?
__________________
"Wieso ist der Code schrott, ich dachte hier seien Profis..."
Aus einem Forum.
Mit Zitat antworten
Sponsored Links
  #10 (permalink)  
Alt 20.05.2013, 22:42
Erfahrener Benutzer
XHTMLforum-Kenner
 
Registriert seit: 28.01.2005
Beiträge: 11.780
fricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz seinfricca kann auf vieles stolz sein
Standard

Progressive Enhancement: Alle Menüpunkte sind ohne JavaScript und mit jedem Gerät erreichbar (siehe oben).
Dann schreibt man ein JavaScript, das bei Klick (und wenn man es angenehmer machen will: touchevents) das Submenü ein-/ausblendet.
Mit Zitat antworten
Sponsored Links
Antwort

Stichwörter
css, dropdown, html

Themen-Optionen
Ansicht

Forumregeln
Es ist Ihnen nicht erlaubt, neue Themen zu verfassen.
Es ist Ihnen nicht erlaubt, auf Beiträge zu antworten.
Es ist Ihnen nicht erlaubt, Anhänge hochzuladen.
Es ist Ihnen nicht erlaubt, Ihre Beiträge zu bearbeiten.

BB-Code ist an.
Smileys sind an.
[IMG] Code ist an.
HTML-Code ist aus.
Trackbacks are an
Pingbacks are an
Refbacks are aus


Ähnliche Themen
Thema Autor Forum Antworten Letzter Beitrag
CSS Menü verändern Severa CSS 1 12.09.2012 01:57
CSS Dropdown Menü "Position zerschießt Layout" stingray CSS 3 24.06.2012 11:17
CSS Dropdown Menü Moepmann123 CSS 9 03.07.2009 22:03
HTML Content vor Menü, CSS soll das ändern, wie? Geldmichel CSS 6 08.12.2006 17:35
problem mit dem css menü nevermind CSS 72 11.10.2005 16:31


Alle Zeitangaben in WEZ +2. Es ist jetzt 23:48 Uhr.