Anzeige

Submenu Navigation bei Wordpress

Submenu Navigation bei Wordpress | PSD-Tutorials.de

Erstellt von rosaro, 24.02.2015.

  1. rosaro

    rosaro Nicht mehr ganz neu hier

    Dabei seit:
    12.05.2009
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    Hallo in die Runde,

    ich will gerade auf unsere HP etwas ändern und benutze das underscore_theme für Wordpress. Da es ziemlich blank daher kommt, muss man noch einige Anpassungen machen. Bisher auch alles ganz okay. Allerdings, ärgert mich gerade das Menu, bzw. die Unterpunkte. Diese sollten horizontal dargestellt werden und nicht die als vertikale Liste. Ich bekomme es leider nicht hin....

    So sieht der Html aus:

    HTML:
    1. <header id="masthead" class="site-header" role="banner">                                  
    2. <div id="head-logo">                
    3. <nav id="site-navigation" class="main-navigation" role="navigation">                    
    4. <button class="menu-toggle" aria-controls="menu" aria-expanded="false">Primary Menu</button>                  
    5.  
    6. <h3><div class="menu-menu-1-container">
    7. <ul id="menu-menu-1" class="menu">
    8. <li id="menu-item-26" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-26">
    9.     <a href="http://localhost:8888/wordpress/">HOME</a></li>
    10. <li id="menu-item-25" class="menu-item menu-item-type-post_type menu-item-object-page current-menu-item page_item page-item-11 current_page_item menu-item-has-children menu-item-25">
    11. <a href="http://localhost:8888/wordpress/?page_id=11">SERVICE</a>
    12.  
    13. <ul class="sub-menu">    
    14. <li id="menu-item-55" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-55"><a href="http://localhost:8888/wordpress/?page_id=48">SUB1</a></li> <li id="menu-item-60" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-60"><a href="http://localhost:8888/wordpress/?page_id=52">SUB2</a></li>    
    15. <li id="menu-item-56" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-56"><a href="http://localhost:8888/wordpress/?page_id=50">SUB3</a></li> </ul>
    16. </li>
    17.  
    18. <li id="menu-item-24" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-24"><a href="http://localhost:8888/wordpress/?page_id=13">NAV3</a></li>
    19. <li id="menu-item-23" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-23"><a href="http://localhost:8888/wordpress/?page_id=15">NAV4</a></li>
    20. <li id="menu-item-22" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-22"><a href="http://localhost:8888/wordpress/?page_id=17">NAV5</a></li> </ul></div></h3>                 </div>                                    
    21.  
    22. </nav><!-- #site-navigation -->            
    23. </header><!-- #masthead -->
    24.  
    25.  
    und so mein CSS:

    Code (CSS):
    1. .main-navigation {
    2.     clear: both;
    3.     display: block;
    4.     float: left;
    5.     width: 100%;
    6. }
    7.  
    8. .main-navigation ul {
    9.     list-style: none;
    10.     margin: 0;
    11.     padding-left: 15px;
    12.     padding-top: 1px;
    13.     margin-left: 33%
    14. }
    15.  
    16. .main-navigation li {
    17.     float: left;
    18.     position: relative;
    19.     padding-right: 2em
    20. }
    21.  
    22. .main-navigation a {
    23.     display: block;
    24.     text-decoration: none;
    25.     color: #444
    26. }
    27.  
    28. .main-navigation ul ul {
    29.     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    30.     float: left;
    31.     position: absolute;
    32.     top: 1.5em;
    33.     left: -999em;
    34.     z-index: 99999;
    35. }
    36.  
    37. .main-navigation ul ul ul {
    38.     left: -999em;
    39.     top: 0;
    40. }
    41.  
    42. .main-navigation ul ul a {
    43.     width: 400px;
    44. }
    45.  
    46. .main-navigation ul ul li {
    47.  
    48. }
    49.  
    50. .main-navigation li:hover > a {
    51.     color: #666
    52. }
    53.  
    54. .main-navigation ul ul :hover > a {
    55. }
    56.  
    57. .main-navigation ul ul a:hover {
    58. }
    59.  
    60. .main-navigation ul li:hover > ul {
    61.     left: auto;
    62. }
    63.  
    64. .main-navigation ul ul li:hover > ul {
    65.     left: 100%;
    66. }
    67.  
    68. .main-navigation .current_page_item > a,
    69. .main-navigation .current-menu-item > a,
    70. .main-navigation .current_page_ancestor > a {
    71.     border-bottom:#444 solid 2px;
    72.     font-weight:700
    73. }
    74.  

    Vielleicht sieht jemand von Euch ja schnell wo ich auf dem Schlauch stehe :confused:

    Danke schon mal und
    Grüße

    R*
     
    #1      
  2. Myhar

    Myhar Hat es drauf

    Dabei seit:
    01.11.2007
    Beiträge:
    2.103
    Geschlecht:
    männlich
    Ort:
    Ö
    Submenu Navigation bei Wordpress
    Du floatest alle Listenpunkte, wie sollen sie da anders als nebeneinander dargestellt werden?
     
    #2      
  3. FlashZange

    FlashZange Nicht mehr ganz neu hier

    Dabei seit:
    12.12.2008
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    Die Unterpunkte sollen horizontal dargestellt werden?
    Da musst du wohl an
    Code (Text):
    1. .main-navigation ul ul li {
    2.  
    3. }
    ran. Listenpunkte werden ja standardmäßig als block-Elemente dargestellt. Also musst du wahrscheinlich sowas wie display:inline-block oder display:inline reinschreiben. Ginge natürlich leichter wenn man das sehen würde und direkt im Firebug oder devtools anschauen könnte.
     
    #3      
  4. rosaro

    rosaro Nicht mehr ganz neu hier

    Dabei seit:
    12.05.2009
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    Sorry...... ich bin nicht so der meister :(

    Also wenn ich das Float bei den LI rausnehme, dann wir das menu aber nicht horizontal dargestellt....@FlashZange: habe ich schon versucht. Geht leider auch nicht: wenn ich
    display: inline bei
    .main-navigation ul ul li
    eintrage...passiert auch nichts, bzw. das:

    [​IMG]

    soweit bin ich mit dem jetztigen Verusch gekommen, nur leider soll das submenue auch horizontal dargestellt werden (und nicht wir jetzt als Block)


    [​IMG]

    Vielleicht ist das verständlciher...

    Danke für Hinweise...
     
    #4      
  5. rosaro

    rosaro Nicht mehr ganz neu hier

    Dabei seit:
    12.05.2009
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    Liegt es vielleicht bei dieser ul am absolute?

    Code (CSS):
    1. .main-navigation ul ul {
    2.     box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    3.     position: absolute;
    4.     top: 1.5em;
    5.     left: -999em;
    6.     z-index: 99999;
    7. }
     
    #5      
  6. FlashZange

    FlashZange Nicht mehr ganz neu hier

    Dabei seit:
    12.12.2008
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    So, nächster Versuch:

    Code (Text):
    1.  
    2. .main-navigation ul ul a {
    3. width: 400px;
    4. display: inline;
    5. }
    6.  
    Das könnte klappen ;)
     
    #6      
  7. rosaro

    rosaro Nicht mehr ganz neu hier

    Dabei seit:
    12.05.2009
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    geht leider auch nicht...hatte ich auch schon probiert.....
    Dann kommt das raus:

    [​IMG]
    Aber danke FlashZange...
     
    #7      
  8. Enigmon

    Enigmon Nicht mehr ganz neu hier

    Dabei seit:
    11.05.2005
    Beiträge:
    128
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    Hallo R.,

    ich habe mir mal eine simple Html und eine CSS-Datei, auf Basis dessen was Du gepostet hast, erstellt.

    Bis auf die oberste Navigationsebene erhalte ich gar kein Ergebnis.
    Es erscheint auch kein Hovereffekt (ausser einen Farbwechsel).
    Kannst du deinen bisherigen Stand posten?

    Ach ja vielleicht hilft dir auch diese Seite weiter:
    http://themedemos.dottoro.com/features/menu/horizontal-submenu/
     
    #8      
  9. rosaro

    rosaro Nicht mehr ganz neu hier

    Dabei seit:
    12.05.2009
    Beiträge:
    74
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    Morgen...

    Also ich bin leider nicht weitergekommen...
    Ich werde das jetzt alles neu anlegen.

    Hat jemand gute Tips / Tutorials für das Erstellen von WP Navigation Menues?
    Durch den Code wp_nav_menu(); vergibt WP eigene Classen, mit denen ich etwas kämpfe. Ich weiß, dass man diese auch ändern kann, allerdings bin ich nicht so ein PHP-Freak :)

    Schönen Tag Euch
     
    #9      
  10. Enigmon

    Enigmon Nicht mehr ganz neu hier

    Dabei seit:
    11.05.2005
    Beiträge:
    128
    Geschlecht:
    männlich
    Submenu Navigation bei Wordpress
    #10      
Seobility SEO Tool
x
×
×