Ergebnis 1 bis 3 von 3

Thema: Submenü mit mehreren Spalten erstellen

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

    Standard Submenü mit mehreren Spalten erstellen

    Guten Tag,

    ich habe für meine Wordpresseite ein Submenü mit einer Spalte.

    Das ist zu wenig, ich brauche zwei.

    .main-navigation ul ul a {
    border-bottom: 1px solid rgba(221, 221, 221, 0.12);
    border-left: medium none;
    border-right: medium none;
    height: auto;
    text-align: left;
    width: 100%;
    font-size: 15px;
    padding: 12px 0;
    text-transform: capitalize;
    font-weight: 500;
    color: #323232;
    }

    .sub-menu-columns ul.sub-menu li {
    display: inline-block;
    float: left;
    width: 200px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(odd) {
    float: left;
    margin-right: 10px;
    }
    .sub-menu-columns ul.sub-menu li:nth-child(even) {
    float: right;
    }


    Der rote Teil definiert im CSS das Submenü und der grüne stellt eine Möglichkeit für zwei Spalten, die noch richtig einzubinden wäre. Ich selber habe das nicht geschafft.

    Das Menü im Ganzen ist hier definiert:

    /*Main nav*/

    #main-nav.fixed {
    position: fixed;
    width: 100%;
    top: 0;
    z-index: 999;
    }

    #main-nav {
    background: #083a6f;
    padding: 5px 0;
    }
    .main-navigation ul {
    display: block;
    margin: 0;
    padding: 0;
    }

    .main-navigation ul ul {
    position: absolute;
    top: 100%;
    left: 0;
    z-index: 1000;
    min-width: 225px;
    -webkit-transform-origin: top;
    transform-origin: top;
    -webkit-animation-fill-mode: forwards;
    animation-fill-mode: forwards;
    -webkit-transform: scale(1, 0);
    transform: scale(1, 0);
    display: block;
    background-color: #ffffff;
    transition: all 0.2s ease-in-out 0.1s;
    padding: 0 25px;
    }


    .main-navigation ul li:hover > ul.sub-menu{
    display: block;
    opacity: 1;
    z-index: 1000;
    -webkit-transform: scale(1, 1);
    transform: scale(1, 1);
    transition: all 0.4s ease-in-out 0.1s;
    }

    .main-navigation ul ul ul {
    left: 114%;
    top: 0;
    border-left: 1px solid #f7f7f76b;
    }
    .main-navigation li {
    display: inline-block;
    float: left;
    margin-bottom: 0;
    position: relative;
    padding: 15px 22px;
    }
    .main-navigation li li {
    float: none;
    display: block;
    padding:0;
    }

    .main-navigation li:first-child {
    padding-left: 0;
    }

    .main-navigation ul li li:first-child > a {
    border-left: none;
    }
    .main-navigation ul li a {
    color: #ececec;
    display: block;
    font-size: 17px;
    position: relative;
    z-index: 99;
    font-weight: 400;
    font-family: 'Roboto', sans-serif;
    }
    .main-navigation ul ul a {
    border-bottom: 1px solid rgba(221, 221, 221, 0.12);
    border-left: medium none;
    border-right: medium none;
    height: auto;
    text-align: left;
    width: 100%;
    font-size: 15px;
    padding: 12px 0;
    text-transform: capitalize;
    font-weight: 500;
    color: #323232;
    }


    .main-navigation ul ul li:last-child a {
    border: none;
    }
    .main-navigation ul li.menu-item-has-children > a::after,
    .main-navigation ul li.page_item_has_children > a::after {
    content: "\f0dd ";
    margin-left: 10px;
    margin-right: 0;
    position: absolute;
    right: 0;
    top: 0;
    font-size: 13px;
    font-family: FontAwesome;
    }

    .main-navigation ul li li.menu-item-has-children > a::after,
    .main-navigation ul li li.page_item_has_children > a::after {
    top: 15px;
    content: "\f0da";
    }

    .main-navigation ul li.menu-item-has-children > a,
    .main-navigation ul li.page_item_has_children > a {
    padding-right: 15px;
    }

    .main-navigation ul li a:hover,
    .main-navigation ul li.current-menu-item > a,
    .main-navigation ul li.current_page_item > a,
    .main-navigation ul li:hover > a {
    color: #ffffff;
    }
    .main-navigation ul li.current-menu-item > a:before,
    .main-navigation ul li.current_page_item > a:before,
    .main-navigation ul li a:hover:before,
    .main-navigation ul li:hover > a:before {
    content: "";
    display: block;
    height: 2px;
    background: #fff;
    position: absolute;
    bottom: -18px;
    width: 100%;
    }
    .main-navigation ul li li.current-menu-item > a:before,
    .main-navigation ul li li.current_page_item > a:before,
    .main-navigation ul li li a:hover:before,
    .main-navigation ul li li:hover > a:before {
    display: none;
    }
    .main-navigation ul ul li a:hover,
    .main-navigation ul ul li.current-menu-item a,
    .main-navigation ul ul li.current_page_item a,
    .main-navigation ul ul li:hover > a {
    color: #3770ab;
    }

    .main-navigation .menu-toggle,
    .main-navigation .dropdown-toggle {
    display: none;
    }

    Habt ihr Ideen zum Zusammenbau?

    Netten Gruß
    Jan


  2. #2
    Samurai
    Registriert seit
    23.01.2018
    Ort
    Minden
    Beiträge
    209
    Danke
    0
    Bekam 29 mal "Danke" in 29 Postings

    Standard AW: Submenü mit mehreren Spalten erstellen

    kannst du dazu mal den html Code zeigen ?
    Mein soforthilfe Forum und Chat

  3. #3
    HTML Newbie
    Themenstarter

    Registriert seit
    16.11.2018
    Beiträge
    2
    Danke
    0
    Bekam 0 mal "Danke" in 0 Postings

    Standard AW: Submenü mit mehreren Spalten erstellen

    das ist von einer wordpress seite.

    denke man muss nur die bezeichnung der Beispielspaltisierung anpassen.....

Ähnliche Themen

  1. Submenü Javascript Problem
    Von MyXoToD im Forum PHP Forum - Apache - CGI - Perl - JavaScript und Co.
    Antworten: 3
    Letzter Beitrag: 25.06.2010, 12:16
  2. CSS Menü mit Submenü
    Von Longbow im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 16.05.2010, 23:20
  3. Navigation mit Submenü
    Von haillo im Forum HTML & CSS Forum
    Antworten: 4
    Letzter Beitrag: 09.09.2008, 19:50
  4. SubMenü
    Von mörchen im Forum HTML & CSS Forum
    Antworten: 5
    Letzter Beitrag: 25.04.2005, 15:40
  5. Tabelle wird zu groß-Spalten mit mehreren Einträgen über SQL
    Von Spiderman im Forum HTML & CSS Forum
    Antworten: 2
    Letzter Beitrag: 13.01.2005, 15:18

Stichworte

Berechtigungen

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