IT rekvalifikace s garancí práce. Seniorní programátoři vydělávají až 160 000 Kč/měsíc a rekvalifikace je prvním krokem. Zjisti, jak na to!
Hledáme nové posily do ITnetwork týmu. Podívej se na volné pozice a přidej se do nejagilnější firmy na trhu - Více informací.

Diskuze: Roztažení menu do řádku

Aktivity
Avatar
tbartolen
Člen
Avatar
tbartolen:9.10.2014 11:26

Ahoj, potřeboval bych poradit, zkouším si vytvořit rolovací menu pomocí CSS, protože s javascriptem ještě moc neumím.
Mám napsané nějaké menu, dejme tomu :

<!DOCTYPE html>
<html lang="cs-cz">
<head>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="keltistylmenu.css" type="text/css"/>
      <title> SK Kelti 2008</title>
<header>
<nav>
        <ul>
                <li><a href="#">Home</a></li>
                <li><a href="#">Tutorials</a>
                        <ul>
                                <li><a href="#">Photoshop</a></li>
                                <li><a href="#">Illustrator</a></li>
                                <li><a href="#">Web Design</a>
                                        <ul>
                                                <li><a href="#">HTML</a></li>
                                                <li><a href="#">CSS</a></li>
                                        </ul>
                                </li>
                        </ul>
                </li>
                <li><a href="#">Articles</a>
                        <ul>
                                <li><a href="#">Web Design</a></li>
                                <li><a href="#">User Experience</a></li>
                        </ul>
                </li>
                <li><a href="#">Inspiration</a></li>
        </ul>
</nav>
</header>

a k tomu CSS v podobě :

nav ul ul {
        display: none;
}

        nav ul li:hover > ul {
                display: block;
        }
nav ul {
        background:#1C4E71;
        background: linear-gradient (top,#efefef 0%,#bbbbbb 100%);
        background: -moz-linear-gradient (top, #efefef 0%, #bbbbbb 100%);
        background: -webkit-linear-gradient (top, efefef 0%,#bbbbbb 100%);
        box-shadow: 0px 0px 9px rgba (0,0,0,0.15);
        padding: 0 20px;
        list-style-type: none;
        position: relative;
        display: inline-table;
        margin 0px;
                }
        nav ul:after {
                      content: ""; clear: both; display: block;}

        }
nav ul li {
         float: left;

          }
nav ul li:hover {
                background#4b545f;
                background: linear-gradient(top, #133F5D 0%, #5f6975 40%);
                        background: -moz-linear-gradient(top, #133F5D 0%, #5f6975 40%);
                        background: -webkit-linear-gradient(top, #133F5D 0%,#5f6975 40%);
                }
                nav ul li:hover a {
                                  color: #fff;}
nav ul li a {
            display: block; padding: 0px 18px;
            color: #fff; text-decoration: fff;}
nav ul ul {background: #6E9DBE; border-radius: 0px; padding: 0;
            position: absolute; top: 100;}
nav ul ul li {
              float: none;
              border-top: 1px solid #6b727c;
              border-bottom: 1px solid #575f6a;
              position: relative;}
              nav ul ul li a {
                              padding: 0px 18px;
                              color:#fff;}
                              nav ul ul li a:hover {
                                                    background: #4b545f;
                                                    }
 nav ul ul ul {
        position: absolute; left: 100%; top:0;
}

Ale pořád nemužu přijít na to, jak to roztáhnout aby to bylo v horizontální podobě...i když používám rady tady z návodů...pořád je to jen tak, jak to je....věděl by někdo? Děkuju

Editováno 9.10.2014 11:27
Odpovědět
9.10.2014 11:26
Navštiv www.fb.com/skkelticz
Avatar
martinstejskal15
Člen
Avatar
martinstejskal15:9.10.2014 11:41

zkuš toto a už by to mělo být jak má

nav ul ul {
        display: none;
}

nav ul li:hover > ul {
        display: block;
}
 nav ul {
         background:#1C4E71;
         background: linear-gradient (top,#efefef 0%,#bbbbbb 100%);
         background: -moz-linear-gradient (top, #efefef 0%, #bbbbbb 100%);
         background: -webkit-linear-gradient (top, efefef 0%,#bbbbbb 100%);
         box-shadow: 0px 0px 9px rgba (0,0,0,0.15);
         padding: 0 20px;
         list-style-type: none;
         position: relative;
         display: block;
         margin 0px;
}
nav ul:after {
        content: ""; clear: both; display: block;
}

 nav li {
          float: left;
          margin: 0 5px 0 0;
           }
 nav li:hover {
                 background#4b545f;
                 background: linear-gradient(top, #133F5D 0%, #5f6975 40%);
                        background: -moz-linear-gradient(top, #133F5D 0%, #5f6975 40%);
                        background: -webkit-linear-gradient(top, #133F5D 0%,#5f6975 40%);
                 }
                 nav ul li:hover a {
                                   color: #fff;}
 nav ul li a {
             display: block; padding: 0px 18px;
             color: #fff; text-decoration: fff;}
 nav ul ul {background: #6E9DBE; border-radius: 0px; padding: 0;
             position: absolute; top: 100;}
 nav ul ul li {
               float: none;
               border-top: 1px solid #6b727c;
               border-bottom: 1px solid #575f6a;
               position: relative;}
               nav ul ul li a {
                               padding: 0px 18px;
                               color:#fff;}
                               nav ul ul li a:hover {
                                                     background: #4b545f;
                                                     }
  nav ul ul ul {
        position: absolute; left: 100%; top:0;
 }
 
Nahoru Odpovědět
9.10.2014 11:41
Avatar
martinstejskal15
Člen
Avatar
Odpovídá na tbartolen
martinstejskal15:9.10.2014 11:43

měl jsi tam dvakrát ukončení } po nav ul:after

Akceptované řešení
+20 Zkušeností
+2,50 Kč
Řešení problému
 
Nahoru Odpovědět
9.10.2014 11:43
Avatar
tbartolen
Člen
Avatar
tbartolen:9.10.2014 11:44

Takže problém je poze v tom, že tam nedám margin ? =)) Děkuju moc:)

Nahoru Odpovědět
9.10.2014 11:44
Navštiv www.fb.com/skkelticz
Avatar
martinstejskal15
Člen
Avatar
martinstejskal15:9.10.2014 11:48

margin tam zústalo ale u display: jsi měl inline-table, to jsem ti změnil na block
potom u nav li ti chyběl margin

u tebe v tom kódu jsem opravil z nav ul li na nav li, protože jedno ul už tam máš

 
Nahoru Odpovědět
9.10.2014 11:48
Avatar
tbartolen
Člen
Avatar
tbartolen:9.10.2014 12:10

paráda, funguje...případně bych se chtěl ještě zeptat, jak dostat tu rolovací funkci do takovéhlohe meníčka :

<!DOCTYPE html>
<html lang="cs-cz">
<head>
      <meta charset="utf-8"/>
      <link rel="stylesheet" href="keltistylpokus.css" type="text/css"/>
      <title> SK Kelti 2008</title>
<body>
<div id="header">&nbsp;</div>
<div id="menu-box">
<ul id="menu" class="clearfix">
        <li class="first"><a class="active" href="/">Úvod</a></li>
        <li><a href="#">Autoři</a></li>
        <li><a href="#">Články</a></li>
        <li><a href="#">Fotografie</a></li>
        <ul>
        <li><a href="#">HTML</a></li>
        </ul>
        <li><a href="#">Kontakt</a></li>
</ul>
</div>

</body>
</html>

A CSS

#menu-box {background: #1C4E71 url('img/menu-bg.gif') repeat-x 0 0;}
#menu {width: 960px; margin: 0 auto;}
#menu ul ul{
        display: none;
}

#menu ul li:hover > ul {
                display: block;
      }

#menu li {
  float: left;
  display: inline;
  list-style-type: none;
  text-align: center;
}

#menu li a {
  text-decoration: none;
  color: #FFF;
  float: left;
  display: inline;
  line-height: 35px;
  padding: 0 18px;
  border-right: 1px solid #6E9DBE;
}

#menu li.first a {border-left: 1px solid #6E9DBE;}
#menu li a:hover, #menu li a.active {background-color: #133F5D;}

/* Clearfix */
.clearfix:after {
  display: block;
  clear: both;
  visibility: hidden;
  height: 0;
  font-size: 0;
  content: ' ';
}

.clearfix {min-height: 1px;}
.clearfix {display: inline-block;}

/* Backslash hack - nemel by to videt IE/Mac \*/
.clearfix {display: block;}
/* Konec hacku */

Zkoušel jsem to tak, že jsem dal

#menu ul ul {
        display: none;
}

#menu   ul li:hover > ul {
                display: block;

A pár dalších vylomenin, ale nic mi nefungovalo, jediné čeho jsem dosáhnul bylo, že se mi každé další li odřádkovalo na další řádek...

Kdyžtak bych byl rád za nějaký podrobný vysvětlení, nechci být jen klikač a kopírovač =)) děkuju

Editováno 9.10.2014 12:11
Nahoru Odpovědět
9.10.2014 12:10
Navštiv www.fb.com/skkelticz
Avatar
martinstejskal15
Člen
Avatar
martinstejskal15:9.10.2014 13:56

to rolovací sub menu to nevím jak, já to nepoužívám, mám jenom klikací, a pak se zobrazí další menu

 
Nahoru Odpovědět
9.10.2014 13:56
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 7 zpráv z 7.