Black Friday Black Friday
Black Friday výprodej! Až 80 % extra bodů zdarma! Více informací zde

Diskuze: Dodělání submenu

HTML a CSS HTML a CSS Dodělání submenu American English version English version

Aktivity (1)
Avatar
alexicek
Člen
Avatar
alexicek:23. dubna 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. dubna 14:14
Avatar
IT Man
Redaktor
Avatar
Odpovídá na alexicek
IT Man:23. dubna 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. dubna 15:59
Cokoliv a kdokoliv může jednou uspět.
Avatar
alexicek
Člen
Avatar
Odpovídá na IT Man
alexicek:23. dubna 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. dubna 17:38
Avatar
Kattii
Člen
Avatar
Kattii:28. dubna 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. dubna 16:03
Avatar
Kattii
Člen
Avatar
Kattii:28. dubna 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. dubna 16:52
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:3. května 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 3. května 13:48
 
Nahoru Odpovědět  +1 3. května 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.