NOVINKA! E-learningové kurzy umělé inteligence. Nyní AI za nejlepší ceny. Zjisti více:
NOVINKA – Víkendový online kurz Software tester, který tě posune dál. Zjisti, jak na to!

Diskuze: Horizontální rozbalovací menu, "podmenu" má menší šířku než jeho nadřazený prvek (rodič)

V předchozím kvízu, Online test znalostí HTML a CSS, jsme si ověřili nabyté zkušenosti z kurzu.

Aktivity
Avatar
František Boháček
Člen
Avatar
František Boháček:22.12.2015 9:01

Zdravím, mám takový problém, udělal jsem si rozbalovací menu a chci, aby vše, co se rozbaluje, mělo alespoň takovou šířku, jako má ten prvek li (respektive jako má prvek a, který je v prvku li), který je nadřazený rozbalovacímu listu. Hledal jsem na internetu, ale nic mi nefungovalo správně, snad mi poradíte tady.

Tady je kód:

<html>
  <head>
    <meta charset="utf8" />
  </head>
  <body>
    <style>


      @font-face {
        font-family: MerriWeather;
        src: url("font/Merriweather-Regular.ttf");
        font-weight: normal;
      }
       @font-face {
        font-family: MerriWeather;
        src: url("font/Merriweather-Bold.ttf");
        font-weight: bold;
      }

      #menu .level1 {
        list-style-type: none;
        display: inline;
      }

      #menu .level1 li {
        display: inline-block;
      }

      #menu .level1 li a {
        color: white;
        text-align: center;
        text-decoration: none;
        display: block;
        padding: 14px 16px;
        position: relative;
      }

      #menu .level1 li a:hover {
        background-color: #4d4d4d;
      }

      #menu .level1 .dropdown:hover ul.level2 {
        display: block;
      }

      #menu .level1 .dropdown .level2 {
        display:none;
        position: absolute;
        background-color: #595959;
        border-radius: 0 0 5px 5px;
        padding: 0;
        white-space: nowrap;
      }

      #menu .level1 .dropdown .level2 li {
        display: block;
      }

      #menu .level1 .dropdown .level2 a {

      }

      #menu {
        width: 100%;
        padding: 0;
        margin: 0;
        text-align: center;
        background-color: #595959;
        height: auto;
        border-radius: 5px;
        position: fixed;

        /* shadow */
        webkit-box-shadow: 0px 1px 64px -5px rgba(110,110,110,1);
        moz-box-shadow: 0px 1px 64px -5px rgba(110,110,110,1);
        box-shadow: 0px 1px 64px -5px rgba(110,110,110,1);
      }

      body {
        width: 100%;
        height: 100%;
        padding: 0;
        margin: 0;
        font-family: MerriWeather;
      }
    </style>

    <div id="menu">

      <ul class="level1">
        <li style="float:left;"><a><b>Něco</b></a></li>
        <li class="dropdown">
          <a href="#">(Rozbalovací ...)</a>

          <ul class="level2">
          <li><a>ABeCeDa</a></li>
          </ul>

        </li>
        <li style="float:right;"><a href="3">Něco</a>
      </ul>
    </div>
    <div style="padding-top:70px;">
    </div>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed pharetra ligula nec turpis vestibulum laoreet. Donec ornare pellentesque turpis, ut consequat ante scelerisque vel. Phasellus eu lacinia elit, eget semper ante. Maecenas eget faucibus risus, malesuada ultrices elit. Aliquam sit amet sapien ultricies velit tempor lobortis. Sed cursus et purus vel aliquet. Vestibulum ut elit nec ipsum pretium viverra. Morbi eu lectus pretium, vestibulum urna aliquam, hendrerit velit. Donec vitae auctor orci. Fusce ut sapien posuere, pulvinar ante sit amet, fringilla ipsum. Cras faucibus luctus ultricies. Nunc vestibulum suscipit varius. Quisque aliquam interdum facilisis.</p>

    <p>Duis quis leo nec ante congue venenatis eget at arcu. Ut elit est, ornare eu nisl a, lacinia dignissim lectus. Nulla luctus ipsum non massa rutrum, non finibus magna luctus. Cras laoreet nulla et dignissim tincidunt. Mauris maximus viverra risus sollicitudin pharetra. Maecenas blandit est est, ut maximus arcu mollis sed. Morbi at risus semper est mattis semper ac sit amet nulla. Sed sodales ultricies arcu. Aliquam suscipit, mauris in pretium tristique, orci justo faucibus mi, eget tempus metus orci euismod turpis. Aenean consectetur risus in ex luctus, nec tristique enim tincidunt. Nam ac massa ac tellus bibendum luctus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>

    <p>Praesent consectetur laoreet nibh ut fermentum. Curabitur pretium condimentum mi ultricies dictum. Pellentesque nec molestie enim. Maecenas eget sem et turpis vehicula blandit. Duis posuere lorem et purus fermentum, sed vulputate enim varius. Proin pharetra tristique elit vel aliquam. Phasellus ultrices eleifend vestibulum. In et ipsum nec lorem convallis efficitur vitae eu dui. Duis quam nisi, mollis ut finibus ut, ultricies eu eros. Phasellus sed erat mattis, ultrices nibh quis, consequat est. Cras nec suscipit enim, et eleifend purus. Proin pellentesque orci orci, in molestie mauris consectetur ac. Nulla facilisi. Sed eget mi lectus. Sed egestas, nulla at lacinia commodo, justo urna porta velit, sed sagittis leo ante id neque.</p>

    <p>Pellentesque consectetur sollicitudin maximus. Aliquam quis placerat massa, nec ullamcorper velit. Suspendisse ut commodo eros. Duis id ultricies ligula. Phasellus ipsum mi, aliquam vestibulum lorem ut, porta pretium augue. Sed augue ligula, vehicula nec ex non, aliquam pellentesque diam. Nulla sed finibus urna, quis imperdiet est. Aenean dignissim non leo vel lobortis.</p>

    <p>Etiam aliquam nec ipsum vel tincidunt. Nunc fringilla a augue sed venenatis. Ut lectus sem, ultrices eu scelerisque eget, porta ac purus. Nunc quis neque velit. Fusce vitae ante hendrerit, tristique leo sed, placerat nisi. Nunc lorem mauris, tempus in eros rutrum, ornare hendrerit metus. Vestibulum dolor eros, ultricies non fringilla in, lacinia quis libero. Phasellus dui tortor, sollicitudin vel dignissim at, aliquet et nunc. Pellentesque odi</p>
  </body>
</html>

Předem díky

 
Odpovědět
22.12.2015 9:01
Avatar
adder
Člen
Avatar
adder:22.12.2015 13:19

Nastavíš .level1 li position: relative a potom tomu podmenu position: absolute; top: 100%; left: 0; widht: 100%; a je to ne? ;)

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
Nahoru Odpovědět
22.12.2015 13:19
I’m going to lay this brick as perfectly as a brick can be laid.
Avatar
František Boháček
Člen
Avatar
Odpovídá na adder
František Boháček:22.12.2015 13:24

Ano! Díky moc! :)

 
Nahoru Odpovědět
22.12.2015 13:24
Avatar
František Boháček
Člen
Avatar
František Boháček:22.12.2015 14:04

Ještě jedna maličkost, jak by bylo možné to uplatnit i obráceně?
Pokud nechápete, tak to myslím takto: když je v .level2 li delší text než v .dropdown (a), tak aby .dropdown mělo velikost podle toho a.

 
Nahoru Odpovědět
22.12.2015 14:04
Avatar
František Boháček
Člen
Avatar
František Boháček:22.12.2015 14:11

vlastně ne podle toho a, ale podle toho .level2 :D

 
Nahoru Odpovědět
22.12.2015 14:11
Avatar
Tomáš123
Člen
Avatar
Odpovídá na František Boháček
Tomáš123:23.12.2015 14:54

Možno by to šlo nasimulovať cez display: table-row. Neskúšal som.

Nahoru Odpovědět
23.12.2015 14:54
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Avatar
František Boháček
Člen
Avatar
Odpovídá na Tomáš123
František Boháček:23.12.2015 16:41

Taky by se hodilo napsat, k čemu bych to měl podle tebe dát, zkoušel jsem to u .level2, .dropdown, ale tak to nešlo

 
Nahoru Odpovědět
23.12.2015 16:41
Avatar
Tomáš123
Člen
Avatar
Odpovídá na František Boháček
Tomáš123:4.2.2016 17:20

Všimni si ukážku v prvom príspevku tohoto vlákna: http://www.itnetwork.cz/…6b1aab5cac12

Podstatou je orezanie cez overflow(-y): hidden. Potom sa ti bude menu prispôsobovať tak, ako chceš. Len nastav výšku v em, aby sa to nerozpadlo pri zmene veľkosti textu.

Nahoru Odpovědět
4.2.2016 17:20
Keby nebolo Internetu Exploreru, nebolo by dnešného internetu.
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.