Anzeige

Dropdown-Menu: Submenu immer links anzeigen

Dropdown-Menu: Submenu immer links anzeigen | PSD-Tutorials.de

Erstellt von Kerstin77, 10.04.2015.

  1. Kerstin77

    Kerstin77 Flashfan

    Dabei seit:
    23.01.2009
    Beiträge:
    205
    Geschlecht:
    weiblich
    Dropdown-Menu: Submenu immer links anzeigen
    Hallo,

    versuche gerade mir ein kleines Dropdown-Menu zu basteln, in dem das Submeu allerdings immer Links unterhalb des ersten Menüpunktes angezeigt werden soll. Aktuell steht das Submenu ganz links auf der Seite.

    Copy/Paste Beispiel:

    Code (Text):
    1.  
    2. <!DOCTYPE html>
    3. <html>
    4. <head>
    5. <meta charset="utf-8">
    6. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    7. <title></title>
    8.  
    9. <style type="text/css">
    10. * {
    11.    margin:0;
    12.    padding:0;
    13. }
    14. nav {
    15.    -webkit-box-shadow: 2px 2px 5px #d4e1e7;
    16.    -moz-box-shadow: 2px 2px 5px #d4e1e7;
    17.    box-shadow: 2px 2px 5px #d4e1e7;
    18. }
    19. #mainmenu {
    20.    list-style:none;
    21.    background-color:#ffffff;
    22.    width:960px;
    23.    margin:0px auto;
    24.    padding:65px 50px 0 290px;
    25. }
    26. #mainmenu li {
    27.    display:inline-block;
    28. }
    29. #mainmenu li a {
    30.    margin-right:30px;
    31.    line-height:30px;
    32.    text-transform:uppercase;
    33. }
    34. #mainmenu li ul {
    35.    margin:0;
    36.    padding:20px 0px;
    37.    position: absolute;
    38.    left:0;
    39.    width:100%;
    40.    min-height:220px;
    41.    text-align:left;
    42.    display:none;
    43.    background-color:rgb(255,255,255);
    44.    background-color:rgba(255,255,255,.5);
    45.    background-repeat:no-repeat;
    46.    background-position:right 20px top 20px;
    47.    -webkit-box-shadow: 2px 2px 5px #d4e1e7;
    48.    -moz-box-shadow: 2px 2px 5px #d4e1e7;
    49.    box-shadow: 2px 2px 5px #d4e1e7;
    50. }
    51. #mainmenu li ul li {
    52.    display:block;
    53. }
    54. #mainmenu li ul li a {
    55.    display:block;
    56.    text-transform:none;
    57. }
    58. </style>
    59.  
    60. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    61. <script>
    62. $(document).ready(function() {
    63.    $("#mainmenu li").hover(function() {
    64.      $(this).find("ul").stop().fadeToggle(400);
    65.    });
    66. });
    67. </script>
    68.  
    69. </head>
    70. <body>
    71.  
    72.   <nav>
    73.   <ul id="mainmenu">
    74.   <li>
    75.   <a href="#">Home</a>
    76.   <ul>
    77.   <li><a href="#">Sublink 1</a></li>
    78.   <li><a href="#">Sublink 2</a></li>
    79.   <li><a href="#">Sublink 3</a></li>
    80.   <li><a href="#">Sublink 4</a></li>
    81.   </ul>
    82.   </li>
    83.   <li>
    84.   <a href="#">Produkte</a>
    85.   <ul>
    86.   <li><a href="#">Sublink 5</a></li>
    87.   <li><a href="#">Sublink 6</a></li>
    88.   <li><a href="#">Sublink 7</a></li>
    89.   <li><a href="#">Sublink 8</a></li>
    90.   <li><a href="#">Sublink 9</a></li>
    91.   <li><a href="#">Sublink 10</a></li>
    92.   </ul>
    93.   </li>
    94.   <li>
    95.   <a href="#">Team</a>
    96.   <ul>
    97.   <li><a href="#">Sublink 11</a></li>
    98.   </ul>
    99.   </li>
    100.   <li>
    101.   <a href="#">Kontakt</a>
    102.   <ul>
    103.   <li><a href="#">Sublink 12</a></li>
    104.   </ul>
    105.   </li>
    106.   </ul>
    107.   </nav>
    108.  
    109. </body>
    110. </html>
    111.  
    Hat jemand einen Tip für mich?

    Kerstin
     
    #1      
  2. maxl100

    maxl100 Noch nicht viel geschrieben

    Dabei seit:
    01.10.2014
    Beiträge:
    12
    Geschlecht:
    männlich
    Dropdown-Menu: Submenu immer links anzeigen
    hallo kerstin,ich verstehe die frage nicht ganz..hast du die möglichkeit die seite online zu schalten?
     
    #2      
  3. Kerstin77

    Kerstin77 Flashfan

    Dabei seit:
    23.01.2009
    Beiträge:
    205
    Geschlecht:
    weiblich
    Dropdown-Menu: Submenu immer links anzeigen
    Online stellen zur Zeit leider nicht. Dafür war das Copy/Paste Beispiel gedacht...

    So soll es aussehen, ist nur leider kein gültiges HTML:

    HTML:
    1.  
    2. <!DOCTYPE html>
    3. <meta charset="utf-8">
    4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.  
    6. <style type="text/css">
    7. * {
    8.    margin:0;
    9.    padding:0;
    10. }
    11. nav {
    12.    -webkit-box-shadow: 2px 2px 5px #d4e1e7;
    13.    -moz-box-shadow: 2px 2px 5px #d4e1e7;
    14.    box-shadow: 2px 2px 5px #d4e1e7;
    15. }
    16. #mainmenu {
    17.    list-style:none;
    18.    background-color:#ffffff;
    19.    width:960px;
    20.    margin:0px auto;
    21.    padding:65px 50px 0 290px;
    22. }
    23. #mainmenu li {
    24.    display:inline-block;
    25. }
    26. #mainmenu li a {
    27.    margin-right:30px;
    28.    line-height:30px;
    29.    text-transform:uppercase;
    30. }
    31. #mainmenu li ul {
    32.    margin:0;
    33.    padding:20px 0px;
    34.    position: absolute;
    35.    left:0;
    36.    width:100%;
    37.    min-height:220px;
    38.    text-align:left;
    39.    display:none;
    40.    background-color:rgb(255,255,255);
    41.    background-color:rgba(255,255,255,.5);
    42.    background-repeat:no-repeat;
    43.    background-position:right 20px top 20px;
    44.    -webkit-box-shadow: 2px 2px 5px #d4e1e7;
    45.    -moz-box-shadow: 2px 2px 5px #d4e1e7;
    46.    box-shadow: 2px 2px 5px #d4e1e7;
    47. }
    48. #mainmenu li ul li {
    49.    display:block;
    50. }
    51. #mainmenu li ul li a {
    52.    display:block;
    53.    margin-right:0;
    54.    text-transform:none;
    55. }
    56. .sublinks {
    57.    width:960px;
    58.    margin:0px auto;
    59.    padding-left:240px;
    60. }
    61.  
    62. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    63. $(document).ready(function() {
    64.    $("#mainmenu li").hover(function() {
    65.      $(this).find("ul").stop().fadeToggle(400);
    66.    });
    67. });
    68.  
    69. </head>
    70.  
    71.   <nav>
    72.   <ul id="mainmenu">
    73.   <li>
    74.   <a href="#">Home</a>
    75.   <ul>
    76.      <div class="sublinks">
    77.   <li><a href="#">Sublink 1</a></li>
    78.   <li><a href="#">Sublink 2</a></li>
    79.   <li><a href="#">Sublink 3</a></li>
    80.   <li><a href="#">Sublink 4</a></li>
    81.   </div>
    82.   </ul>
    83.   </li>
    84.   <li>
    85.   <a href="#">Produkte</a>
    86.   <ul>
    87.      <div class="sublinks">
    88.   <li><a href="#">Sublink 5</a></li>
    89.   <li><a href="#">Sublink 6</a></li>
    90.   <li><a href="#">Sublink 7</a></li>
    91.   <li><a href="#">Sublink 8</a></li>
    92.   <li><a href="#">Sublink 9</a></li>
    93.   <li><a href="#">Sublink 10</a></li>
    94.      </div>
    95.   </ul>
    96.   </li>
    97.   <li>
    98.   <a href="#">Team</a>
    99.   <ul>
    100.   <div class="sublinks">
    101.      <li><a href="#">Sublink 11</a></li>
    102.   </div>
    103.   </ul>
    104.   </li>
    105.   <li>
    106.   <a href="#">Kontakt</a>
    107.   <ul>
    108.   <div class="sublinks">
    109.      <li><a href="#">Sublink 12</a></li>
    110.   </div>
    111.   </ul>
    112.   </li>
    113.   </ul>
    114.   </nav>
    115.  
    116. </body>
    117. </html>
    118.  
     
    #3      
  4. Enigmon

    Enigmon Nicht mehr ganz neu hier

    Dabei seit:
    11.05.2005
    Beiträge:
    128
    Geschlecht:
    männlich
    Dropdown-Menu: Submenu immer links anzeigen
    Auf die Gefahr mich hier zum Klops zu machen, warum ist das HTML ungültig?
    Hab ich was übersehen?

    LG
    Thomas
     
    Zuletzt bearbeitet: 10.04.2015
    #4      
  5. Kerstin77

    Kerstin77 Flashfan

    Dabei seit:
    23.01.2009
    Beiträge:
    205
    Geschlecht:
    weiblich
    Dropdown-Menu: Submenu immer links anzeigen
    Ich hab's :)
    HTML:
    1.  
    2. <!DOCTYPE html>
    3. <meta charset="utf-8">
    4. <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    5.  
    6. <style type="text/css">
    7. * {
    8.    margin:0;
    9.    padding:0;
    10. }
    11. nav {
    12.    -webkit-box-shadow: 2px 2px 5px #d4e1e7;
    13.    -moz-box-shadow: 2px 2px 5px #d4e1e7;
    14.    box-shadow: 2px 2px 5px #d4e1e7;
    15. }
    16. #mainmenu {
    17.    list-style:none;
    18.    background-color:#ffffff;
    19.    width:960px;
    20.    margin:0px auto;
    21.    padding:65px 50px 0 290px;
    22. }
    23. #mainmenu li {
    24.    display:inline-block;
    25. }
    26. #mainmenu li a {
    27.    margin-right:30px;
    28.    line-height:30px;
    29.    text-transform:uppercase;
    30. }
    31. .submenu {
    32.    position: absolute;
    33.    left: 0;
    34.    width: 100%;
    35.    display:none;
    36.    background-color:rgb(255,255,255);
    37.    background-color:rgba(255,255,255,.5);
    38.    background-repeat:no-repeat;
    39.    background-position:right 20px top 20px;
    40.    -webkit-box-shadow: 2px 2px 5px #d4e1e7;
    41.    -moz-box-shadow: 2px 2px 5px #d4e1e7;
    42.    box-shadow: 2px 2px 5px #d4e1e7;
    43. }
    44. #mainmenu li ul {
    45.    width: 960px;
    46.    margin:0px auto;
    47. }
    48. #mainmenu li ul li {
    49.    display:block;
    50. }
    51. #mainmenu li ul li a {
    52.    display:block;
    53.    margin-right:0;
    54.    text-transform:none;
    55. }
    56.  
    57. <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
    58. $(document).ready(function() {
    59.    $("#mainmenu li").hover(function() {
    60.      $(this).find(".submenu").stop().fadeToggle(400);
    61.    });
    62. });
    63.  
    64. </head>
    65.  
    66.   <nav>
    67.   <ul id="mainmenu">
    68.   <li>
    69.      <a href="#">Home</a>
    70.   <div class="submenu">
    71.   <ul>
    72.   <li><a href="#">Sublink 1</a></li>
    73.   <li><a href="#">Sublink 2</a></li>
    74.   <li><a href="#">Sublink 3</a></li>
    75.   <li><a href="#">Sublink 4</a></li>
    76.   </ul>
    77.   </div>
    78.   </li>
    79.   <li>
    80.   <a href="#">Produkte</a>
    81.   <div class="submenu">
    82.   <ul>
    83.   <li><a href="#">Sublink 5</a></li>
    84.   <li><a href="#">Sublink 6</a></li>
    85.   <li><a href="#">Sublink 7</a></li>
    86.   <li><a href="#">Sublink 8</a></li>
    87.   <li><a href="#">Sublink 9</a></li>
    88.   <li><a href="#">Sublink 10</a></li>
    89.   </ul>
    90.   </div>
    91.   </li>
    92.   <li>
    93.   <a href="#">Team</a>
    94.   <div class="submenu">
    95.   <ul>
    96.   <li><a href="#">Sublink 11</a></li>
    97.   </ul>
    98.   </div>
    99.   </li>
    100.   <li>
    101.   <a href="#">Kontakt</a>
    102.   <div class="submenu">
    103.   <ul>
    104.   <li><a href="#">Sublink 12</a></li>
    105.   </ul>
    106.   </div>
    107.   </li>
    108.   </ul>
    109.   </nav>
    110.  
    111. </body>
    112. </html>
    113.  
     
    #5      
  6. patrick_l

    patrick_l Stereotyp(e)

    22
    Dabei seit:
    11.05.2008
    Beiträge:
    7.629
    Geschlecht:
    männlich
    Ort:
    NRW
    Software:
    CS6/CC2017, Affinity, Atom, Brackets, PHPStorm, Pug, Sass, Wacom
    Kameratyp:
    Canon DSLR [...]
    Dropdown-Menu: Submenu immer links anzeigen
    Eine Division hat in einer Liste (Innerhalb des UL und OL-Tags) nicht zu suchen! Nun zu deiner Frage:

    HTML:
    1. <nav id="mainmenu" role="navigation">
    2.  
    3.     <ul>
    4.         <li class="dropdown">
    5.             <a href="#">Example 1</a>
    6.             <ul class="dropdown-menu example-1">
    7.                 <li><a href="#">Sub 1</a></li>
    8.                 <li><a href="#">Sub 2</a></li>
    9.             </ul>
    10.         </li>
    11.         <li class="dropdown">
    12.             <a href="#">Example 2</a>
    13.             <ul class="dropdown-menu example-2">
    14.                 <li><a href="#">Sub 1</a></li>
    15.                 <li><a href="#">Sub 2</a></li>
    16.             </ul>
    17.         </li>
    18.     </ul>
    19. </nav>
    Über CSS die UL in der zweiten Ebene auf display:block setzen und absolute positionieren. Mit positiven oder negativen Margin an die gewünschte Stelle verschieben.
    Edit:
    Warst wohl schneller ;)

    Liebe Grüße, Patrick
     
    #6      
    Enigmon gefällt das.
  7. Enigmon

    Enigmon Nicht mehr ganz neu hier

    Dabei seit:
    11.05.2005
    Beiträge:
    128
    Geschlecht:
    männlich
    Dropdown-Menu: Submenu immer links anzeigen
    Danke

    Hatte ich tatsächlich übersehen..

    LG
    Thomas
     
    #7      
x
×
×