NOVINKA: Kurz kybernetické bezpečnosti s akreditací MŠMT, nyní již od 0 Kč. Staň se žádaným profesionálem. Zjisti více:
Avatar
alexicek
Člen
Avatar
alexicek:23.4.2018 14:14

Zdravím,chtěl bych se zeptat,jestli by mi mohl někdo ukázat jak dodělat submenu do CSS,aby to vypadalo dobře.Mám menu bez submenu, a dostali jsme úkol vytvořit projekt v rozsahu 15-20 stránek a bez submenu by to menu vypadalo hrozně.
Přikládam CSS a HTML kod s menu.
HTML:

<div id="cssmenu">
      <ul>
        <li class="active"><span style="color: #999999;"><a href="#"><span>Uvod</span></a></span>
        </li>
        <li><span style="color: #999999;"><a href="#"><span>Postavy</span></a></span></li>
        <li><span style="color: #999999;"><a href="#"><span>Postavy</span></a></span></li>
        <li class="last"><span style="color: #999999;"><a href="#"><span>Kontakt</span></a></span></li>
      </ul>
    </div>

CSS:

#cssmenu {
        zoom: 1;
        width: auto;
        height: 45px;
        background: #000000;
        padding: 8px 0;
        margin-left: 15%;
        margin-right: 15%;
        border-radius: 8px;
        -webkit-box-shadow: -1px 0px 21px 0px rgba(0, 255, 0, 0.8);
        -moz-box-shadow:    -1px 0px 21px 0px rgba(0, 255, 0, 0.8);
        box-shadow:         -1px 0px 21px 0px rgba(0, 255, 0, 0.8);
        z-index: 999;
}
#cssmenu:before {
  content: '';
  display: block;
}
#cssmenu:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu ul {
        list-style-type: none;
        position: relative;
        display: block;
        font-size: 25px;
        font-family: Skyrimfont;
        margin: 0;
        padding: 0;
        border-bottom: 1px #7ab900;
        zoom: 1;
        margin-left: 33%;
}
#cssmenu ul:before {
  content: '';
  display: block;
}
#cssmenu ul:after {
  content: '';
  display: table;
  clear: both;
}
#cssmenu li {
  display: block;
  float: left;
  margin: 0;
  padding: 0;
}
#cssmenu li a {
  float: left;
  color: #A79787;
  text-decoration: none;
  height: 24px;
  padding: 9px 15px 0;
  font-weight: normal;
}
#cssmenu li:hover,
#cssmenu .active {
        text-decoration: none;
        border-bottom: 2px solid #7ab900;
}
#cssmenu li:hover a {
  color: #fff;
}
#cssmenu .active a {
  color: #fff;
  font-weight: 700;
}
 
Odpovědět
23.4.2018 14:14
Avatar
Jan Lupčík
Tvůrce
Avatar
Odpovídá na alexicek
Jan Lupčík:23.4.2018 15:59

Ahoj,
na submenu jsem tu psal jednou článek. Mohl by ti trochu pomoci a nasměrovat tě. :)
https://www.itnetwork.cz/…-css-submenu

Nahoru Odpovědět
23.4.2018 15:59
TruckersMP vývojář
Avatar
alexicek
Člen
Avatar
Odpovídá na Jan Lupčík
alexicek:23.4.2018 17:38

Návod to je super,ale nedokážu se vyznat,co kde mám dopsat.Možná kdybych dělal menu od znova díky toho,tak bych to zvládl,ale jakmile mám doplnit věci do menu kterému nerozumím,tak jsem dost mimo

 
Nahoru Odpovědět
23.4.2018 17:38
Avatar
Kattii
Člen
Avatar
Kattii:28.4.2018 16:03

Zdravím,
za 1. color ve <span> u odkazů napiš do css, takhle se ti to bude hodně blbě přepisovat a měnit
za 2. nechápu proč tam cpeš tolik <span> tagů, stačí jen <li> a hned za to <a>, barvy, odsazení atp. dostyluješ v css
za 3. třída last tam být vůbec nemusí, do css dáš

#css_menu ul li:last-of-type {}

a teď k hlavní otázce:
pod jednotlivými <li> vytvoř <span> s podkategoriemi zase s <li> <a> ...
celý <span> pak v css odsuň mimo hranice obrazovky (top: -50em nebo display: none atp. hlavně ne jen opacity: 0, to by jsi měl stále neviditelné v popředí a dělalo by to bordel) a pomocí js zobrazuj jednotlivé submenu.
Jestli chceš, v rychlosti vymyslím nějaký příklad, jen mi dej čas :)

 
Nahoru Odpovědět
28.4.2018 16:03
Avatar
Kattii
Člen
Avatar
Kattii:28.4.2018 16:52

Takže jsem si k tomu v rychlosti sedla a napadlo mě to vyřešit spíše v css, než tam tahat zbytečně js. Jednoduše za menu jsou schované absolutní submenu <span>y které se při najetí myší na odkaz zobrazí. Css selektor + u

#submenu li:hover + span {
...
}

udává, že při najetí na <li> se zobrazí <span>, který se za ním nachází na stejné úrovni.
připomínky:
smazala jsem ti tam věci, co tam máš úplně zbytečně:

  • :after a :before nemusíš cpát všude, jen když tam něco potřebuješ
  • zoom: 1 je výchozí, nemusíš to tam mít, pokud to nijak nezoomuješ, což v příkladu neděláš
  • pročti si, které tagy mají jaké výchozí hodnoty, ať je tam zbytečně nedáváš

a zde je výsledek.
https://codepen.io/…i/pen/rvjVwp
jestli něco nechápeš, ptej se, ráda poradím

Akceptované řešení
+20 Zkušeností
Řešení problému
 
Nahoru Odpovědět
28.4.2018 16:52
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3.5.2018 13:46

http://mlich.zam.slu.cz/x/menuedul.htm - kliknes na www a mas kod hotovy

<style>

.menu           {behavior:url("csshover.htc");}

.menu           {_display:inline-block;}
.menu ul        {list-style:none;}
.menu li ul     {list-style:none;position:absolute;z-index:10;display:none;}
.menu a         {display:block;text-decoration:none;}
.menu div a     {width:100%;display:block;text-align:center;}
.menu li li a   {width:6.5em;font-size:90%;}
.menu li        {width:6.5em;float:left;}
.menu li li     {width:auto;float:none;}
.menu li:hover ul {display:block;}
.menu br        {clear:left;}

.menu  {
        padding:3px 0 0 0;
        background:#f0f0e0 none repeat 0 0;
        border-width:2px;
        border-style:solid;
        border-color:#cac6af;
}
.menu ul {
        margin:0;
        padding:2px 0 0 3px;
}
.menu li ul {
        margin:0;
        padding:2px 4px 2px 2px;
        background:#eeede0 none repeat 0 0;
        border-width:1px;
        border-style:solid;
        border-color:#cac6af;
}
.menu li {
        margin:0 0 3px 3px;
}
.menu li div {
}
.menu li li {
        margin:1px;
}
.menu div a {
        padding:1px 0 0 0;
        color:#666;
        border-width:1px;
        border-style:solid;
        border-color:#fff #d8d2bd #d8d2bd #fff;
}
.menu div a:hover {
        color:#000;
        background:#e3dec5 none repeat 0 0;
        border-color:#8d887a;
}
.menu li:hover div a {
        background:#e3dec5 none repeat 0 0;
        border-width:1px;
        border-style:solid;
        border-color:#8d887a;
}
.menu li li a {
        padding:0 2px 0 29px;
        color:#666;
        background:transparent url("listrar.gif") no-repeat 6px 50%;
        border-width:1px;
        border-style:solid;
        border-color:#eeede0;
}
.menu li li a:hover {
        padding:0 2px 0 29px;
        color:#000;
        background:#e3dec5 url("listrar.gif") no-repeat 6px 50%;
        border-color:#8d887a;
}
</style>
<div class="menu">
<ul>
<li>
        <div><a href="#" title="Hlavni1">Hlavni1</a></div>
        <ul>
        <li><a href="#" title="PodMenu1A">PodMenu1A</a></li>
        <li><a href="#" title="PodMenu1B">PodMenu1B</a></li>
        <li><a href="#" title="PodMenu1C">PodMenu1C</a></li>
        </ul>
</li>
<li>
        <div><a href="#" title="Hlavni2">Hlavni2</a></div>
        <ul>
        <li><a href="#" title="PodMenu2A">PodMenu2A</a></li>
        <li><a href="#" title="PodMenu2B">PodMenu2B</a></li>
        <li><a href="#" title="PodMenu2C">PodMenu2C</a></li>
        <li><a href="#" title="PodMenu2D">PodMenu2D</a></li>
        </ul>
</li>
<li>
        <div><a href="#" title="Hlavni3">Hlavni3</a></div>
</li>
<li>
        <div><a href="#" title="Hlavni4">Hlavni4</a></div>
        <ul>
        <li><a href="#" title="PodMenu4A">PodMenu4A</a></li>
        <li><a href="#" title="PodMenu4B">PodMenu4B</a></li>
        </ul>
</li>
</ul>
<br/>
</div>

Nicmene, muj nazor je, ze submenu je nejvetsi zlo, uz asi 20 let.

Editováno
 
Nahoru Odpovědět
3.5.2018 13:46
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 6 zpráv z 6.