Horizontální menu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu

Horizontální menu – CSS – Fórum – Programujte.comHorizontální menu – CSS – Fórum – Programujte.com

 

Háňa
~ Anonymní uživatel
7 příspěvků
13. 4. 2016   #1
-
0
-

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
-
0
-

#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
4007 příspěvků
13. 4. 2016   #3
-
0
-

(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...–
Sheldon0
Newbie
11. 5. 2016   #4
-
0
-

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áš1230
Newbie
16. 5. 2016   #5
-
0
-

#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.–
Zjistit počet nových příspěvků

Přidej příspěvek

Toto téma je starší jak čtvrt roku – přidej svůj příspěvek jen tehdy, máš-li k tématu opravdu co říct!

Ano, opravdu chci reagovat → zobrazí formulář pro přidání příspěvku

×Vložení zdrojáku

×Vložení obrázku

Vložit URL obrázku Vybrat obrázek na disku
Vlož URL adresu obrázku:
Klikni a vyber obrázek z počítače:

×Vložení videa

Aktuálně jsou podporována videa ze serverů YouTube, Vimeo a Dailymotion.
×
 
Podporujeme Gravatara.
Zadej URL adresu Avatara (40 x 40 px) nebo emailovou adresu pro použití Gravatara.
Email nikam neukládáme, po získání Gravatara je zahozen.
-
Pravidla pro psaní příspěvků, používej diakritiku. ENTER pro nový odstavec, SHIFT + ENTER pro nový řádek.
Sledovat nové příspěvky (pouze pro přihlášené)
Sleduj vlákno a v případě přidání nového příspěvku o tom budeš vědět mezi prvními.
Reaguješ na příspěvek:

Uživatelé prohlížející si toto vlákno

Uživatelé on-line: 0 registrovaných, 4 hosté

 

Hostujeme u Českého hostingu       ISSN 1801-1586       ⇡ Nahoru Webtea.cz logo © 20032024 Programujte.com
Zasadilo a pěstuje Webtea.cz, šéfredaktor Lukáš Churý