Autor Zpráva
Jiriczek55
Profil
Na mých stránkách www.svatbyvbeskydech.cz, mám ikonkové menu, je mi někdo schopen poradit, ideálně vypsat kód, aby se mi při hoveru ukazoval popisek odkazu? Děkuji moc.

/**  NAVIGATION  **/
 
.navbar {
  width:100%;
  z-index: 1000;
  text-align:center;
  position:relative;
  margin-bottom:0px;
  background:transparent;
  font-size: 0px;
  line-height: 0px;
  border-radius: 0px;
  border: 0px solid transparent;   
}
  
 
.navbar-inner {
  min-height: 110px;
  padding-right: 0px;
  padding-left: 0px;
  background-color: transparent;
  background-image: none !important;
  border: 0px solid #d4d4d4;
  -webkit-border-radius: 0px;
  -moz-border-radius: 0px;
  border-radius: 0px;
  filter:progid:DXImageTransform.Microsoft.gradient(enabled = false);
  -webkit-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
  -moz-box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
  box-shadow: 0 0px 0px rgba(0, 0, 0, 0.065);
    margin-left: auto; margin-right: auto; 
  display:inline-block;  
}
 
.navbar .nav {
  background: rgba(61, 70, 84,0.2);
  list-style: none;
  display: inline-block;     
  -webkit-border-radius: 60px;
     -moz-border-radius: 60px;
          border-radius: 60px;
  border:0px solid;
  padding: 15px;
  text-align: center;
  margin: 0px;
}
 
 
.navbar .nav li {
  float:left;
  margin-left:10px;
  display:block;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%; 
}
 
.navbar .nav li:first-child {
  margin-left:0px;
 
}
 
.navbar .nav > li > a {
  float: none;
  padding:0px;
  color: #FFF;
  background: #757081;
  text-decoration:none;
  display:block;
  text-align:center;
  padding: 0px;
  width:80px;
  -webkit-border-radius: 50%;
     -moz-border-radius: 50%;
          border-radius: 50%;  
}
 
.navbar .nav > li > a:focus {
  border: 0px solid transparent;
}
 
.navbar .nav > li > a i {
  width:40px;
  line-height:80px;
  font-size:40px;
}
 
 
 
.navbar .nav > li:hover > a{
  color:#FFF;
  text-decoration:none;
  display:block;
  background-color: #696574;  
}
 
.navbar .nav > .active > a, .navbar .nav > .active > a:hover, .navbar .nav > .active > a:focus {
  color: #FFF;
  text-decoration: none;
  -webkit-box-shadow: none !important;
  -moz-box-shadow: none !important;
  box-shadow: none !important;
}
Joker
Profil
<a href="adresa" title="popisek"></a>
Marschmallow
Profil
Jiriczek55:
Pomocí CSS lze. Pročetl bych si článek Popisek po najetí myší.
Jiriczek55
Profil
Jde mi konkrétně o řešení přizpůsobené mé stránce, tzn. ať se text nebije s ikonou, ať je dobře čitelný, třeba ať vyjíždí nad ikonu.

Pokud bude řešení "luxusní" rád se odměním.
Taurus
Profil
Na té stránce jsou dokonce zdrojové kódy. Co už si jen víc přát. Stačí to graficky odladit a je to.
Str4wberry
Profil
Osobně bych využil spíš toho <strong>u, co tam je, a title úplně vyhodit (jen duplikuje tutéž informaci).

Nějak takhle třeba: Odkaz
jefitto44
Profil
Alebo javascript ToolTip sa to volá
Jiriczek55
Profil
Str4wberry:
Pecka, dík moc.
Marschmallow
Profil
Str4wberry:
Jen bych ty popisky přesunul do dolní části. Protože po odrolování a tím zobrazení fixního menu se popisky nezobrazují.
kukuč
Profil *
Hezké, ale asi to nepůjde v IE9 a nižším.
Str4wberry
Profil
Reakce na kukuče:
V IE 9 nepůjde plynulá změna průhlednosti přes transition. To ale není taková tragédie.
V IE 8 potom nebude fungovat poloprůhledné pozadí přes rgba, což řešit jde, ale jelikož ten web je v IE 8 celý rozpadlý, tak jsem to neřešil.

Jinak není použito nic, co by ve zmíněných prohlížečích nemělo fungovat.

No, ještě v IE 7 nebudou fungovat ty šipky přes :before (protože to funguje až od IE 8), to by šlo nahradit prázdným elementem.


Reakce na Marschmallowa:
Aha, toho jsem si nevšiml. Tak to už není problém snadno změnit. Odkaz

Vaše odpověď


Prosím používejte diakritiku a interpunkci.

Ochrana proti spamu. Napište prosím číslo dvě-sta čtyřicet-sedm:

0