Horizontální menu

Háňa

~ Anonymní uživatel
~ 7 příspěvků

13. 4. 2016 #1

Dobrý den,

potřebovala bych odladit horizontální menu. Mám to částečně odladěné zde:

http://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_dropdown_navbar

Problém je, že v zadání je odkaz dvoubarevný.

tj. např. jazykové kurzy budou jazykove (color:red) a kurzy (color:green). Můžete mi poradit, jak toto vyřešit? Pokud tam hodím natvrdo span style k danému řádku ,tak zase nebude fungovat a:hover. A zase rozdělit to na dva styly odkazu, tak mi to nepřijde úplně nejlepší řešení. A moc nevím, jak to vyřešit. Děkuji za rady, nebo nasměrování.

Nahlásit jako SPAM

IP: 93.181.80.–

Háňa

~ Anonymní uživatel
~ 7 příspěvků

13. 4. 2016 #2

#1 Háňa
Koukám, že se to nenačte: zde je zdroj:

<!DOCTYPE html>
<html>
<head>
<style>
#menu{margin-top:20px}
ul {
    list-style-type: none;
    margin: 0;
    padding: 40;
    overflow: hidden;
    background-color: white;
    font-weight:bold;

}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    min-width:150px; 
    

}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #00cccc; color:white;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #00cccc;
    min-width: 160px;
    padding-top:80px;
    position:absolute;
    top:0px;
    z-index:-1

    ;
}

.dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #00cccc; color:white}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
   <li class="dropdown">
    <a href="#" class="dropbtn">jazykova<br>kurzy</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">překlady<br>a tlumočení</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="#" class="dropbtn">další<br>vzdělávání</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
</div>
</body>
</html>

Nahlásit jako SPAM

IP: 93.181.80.–

peter

~ Anonymní uživatel
~ 4014 příspěvků

13. 4. 2016 #3

(reseni 1)
Jestli bude text dvoubarevny, tak logicky by mela mit kazda barva svuj kontejner, span.
a span text /span span text /span /a (nebudu psat tagove znacky zamerne)
Ty spany je mozne pridat javascriptem. Spany se zrovna nehodi, kdyz ten text dal pouzivas v js pres innerHTML. Ale proste to tak je spravne.

(reseni 2)
Dalsi moznost je mit dva odkazy na stejnou url. Coz je spis nespravne.
a class=x text /a a class=y text /a

Pak je tu mozna pouzitelna mocnost pres css :first-letter, :first-child, :first-of-type (:first nee, to je pro tisk, prvni strana)
https://developer.mozilla.org/…first-letter
:first-of-type - kazdy prvni tag shodneho jmena, vyzaduje to pridat spany, viz reseni 1
:first-child - prvni tag, opet pridat spany
Mozna neni, ale i kdyby existovalo first-word, tak u tebe se nemusi jednat o prvni slovo, ale prvni radek. Takze stejne musis nejak rici, ze jsou radky 2. Jestli tam das BR nebo dva SPANy je uz celkem jedno.

Nahlásit jako SPAM

IP: 2001:718:2601:26c:a87a:e0...–

Sheldon 0

Newbie

11. 5. 2016 #4

myslíš takhle:

<!doctype html>
<meta name="viewport" content="width=device-width">
<!DOCTYPE html>
<html>
<head>
<style>
#menu{margin-top:20px}
ul {
    list-style-type: none;
    margin: 0;
    padding: 40;
    overflow: hidden;
    background-color: white;
    font-weight:bold;

}

li {
    float: left;
}

li a, .dropbtn {
    display: inline-block;
    color: black;
    text-align: left;
    padding: 14px 16px;
    text-decoration: none;
    min-width:150px; 
    

}

li a:hover, .dropdown:hover .dropbtn {
    background-color: #00cccc; color:white;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #00cccc;
    min-width: 160px;
    padding-top:80px;
    position:absolute;
    top:0px;
    z-index:-1

    ;
}

.dropdown-content a {
    color: black;
    padding: 10px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #00cccc; color:white}

.dropdown:hover .dropdown-content {
    display: block;
}
</style>
</head>
<body>
<div id="menu">
<ul>
   <li class="dropdown">
    <a href="#" class="dropbtn"><span style="color: red">jazykova</span><br><span style="color: green">kurzy</span></a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
    <li class="dropdown">
    <a href="#" class="dropbtn">překlady<br>a tlumočení</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
  <li class="dropdown">
    <a href="#" class="dropbtn">další<br>vzdělávání</a>
    <div class="dropdown-content">
      <a href="#">Link 1</a>
      <a href="#">Link 2</a>
      <a href="#">Link 3</a>
    </div>
  </li>
</ul>
</div>
</body>
</html>

kdyžtak živá ukázka http://kod.djpw.cz/bwxb-

Nahlásit jako SPAM

IP: 82.145.221.–

Tomáš123 0

Newbie

16. 5. 2016 #5

#1 Háňa
Postup použiť spany je správny. Inline zápis má však druhú najväčšiu prioritu, takže bežný selektor ul li a:hover span nie je dosť silný, aby nastavenie farby prebil. Pomohol by iba !important za CSS vlastnosťou. Bežne sa, hlavne začiatočníkom, odporúča použitiu prebíjača úplne vyhnúť, lebo zdroj prípadného neskoršieho nechceného správania nemusí byť hneď zrejmý.

Ani s funkčným riešením použitia importantu však nejde pri nájdení myši sfarbiť každý span inak a v prípade potreby zmeny farby písma neostáva nič iné než manuálne zmeniť hodnotu v atribúte každého spanu.

Odporúčal by som preto spanom priradiť triedy (pokiaľ možno všeobecnejšie ako red či green), vzhľad nastaviť tam a selektorom ul li a:hover span.nieco zmeniť farbu pôvodného textu pokojne aj každej časti zvlášť.

Kaskádovanie v CSS: http://www.jakpsatweb.cz/…adovani.html

Nahlásit jako SPAM

IP: 85.237.234.–

← Zpět na seznam vláken ← Zpět do Fóra