Fade in/out efekt CSS v menu – CSS – Fórum – Programujte.com
 x   TIP: Přetáhni ikonu na hlavní panel pro připnutí webu
Reklama
Reklama

Fade in/out efekt CSS v menu – CSS – Fórum – Programujte.comFade in/out efekt CSS v menu – CSS – Fórum – Programujte.com

 

Hledá se programátor! Plat 1 800 € + bonusy (firma Boxmol.com)
Jakub
~ Anonymní uživatel
865 příspěvků
18. 11. 2014   #1
-
0
-

Zdravím. V CSS umím takové ty základy a chtěl bych se naučit, jak vytvořit FADE IN/OUT efekt. Česky postupné hasnutí nabídek. Našla by se nějáká dobrá duše co by poradila ? Zkoušel jsem to sám, ale nikdy se mi to nepovedlo napasovat přímo na můj web(na kterém se učím)
 CSS:

#body {
margin: 0;
font-family: Arial, Verdana, sans-serif;
font-size: small;
margin: 0;
}
#obal {
width: 1024px;
margin: 0 auto;
position: relative;
}
#zahlavi {
width: 100%;
height: 150px;
background-image: url("zahlavi_hover.png");
}
h1 {
margin-top: 0;
display: none;
}
h2 {
margin-top: 0;
}
a {
display: block;
}
a:hover {
background-position: 0 -150px;
}
#obsah {
width: 75%;
float: left;
background-image: url("obsah_poz_velke.png");
background-repeat: repeat-y;
min-height: 1000px;
}
#panel {
width: 25%;
float: right;
background-image: url("panel_poz_1_mod.png");
background-repeat: repeat-y;
min-height: 1000px;
margin: 0;
padding: 0;
}
#panel li {
list-style-type: none;
height: 50px;
width: 256px;
}
#panel ul {
margin: 0;
padding: 0;
}
#panel a {
display: block;
width: 256px;
height: 50px;
}
#p-novinky {
background: url(Menu/novinky.png);
}
#p-projekty {
background: url(Menu/projekty.png);
}
#p-historie {
background: url(Menu/historie.png);
}
#p-kontakt {
background: url(Menu/kontakt.png);
}
#panel a:hover {
background-position: left -50px;
}
#panel a span {
display: none;
}
#panel h2 {
display: none;
}
#menu h2 {
display: none;
}
#menu ul {
width: 1024px;
height: 50px;
float: left;
padding: 0;
margin: 0;
background-image: url("menu.png");
list-style-type: none;
}
#menu ul li {
float: left;
}
#menu a {
display: block;
color: black;
font-size: 105%;
font-weight: bold;
text-decoration: none;
padding: 5px 20px;
}

HTML:

<body id="novinky">           
 <div id="obal">            
      <head>                       
        <link rel="stylesheet" type="text/css" href="s_index.css">               
      </head>               
    <div id="zahlavi"><a id=zahlavi href=novinky.html> <h1>Scherby webdesign</h1></a></div>             
    <div id="menu">    <h2>Navigace:</h2>                  
      <ul>                      
        <li> <a href="http://www.seznam.cz/">Seznam 2010</a> </li>                             
        <li> <a href="http://www.seznam.cz/">Seznam 2011</a> </li>                            
        <li> <a href="http://www.seznam.cz/">Seznam 2012</a> </li>                              
        <li> <a href="http://www.seznam.cz/">Seznam 2013</a> </li>                    
      </ul>            
    </div>              
    <div id="obsah">  <h2>Novinky</h2>                 
      <p>28.10.2014</p> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed non ligula venenatis, posuere nulla nec, ultrices elit.  Phasellus at   leo a nunc lobortis rutrum. Duis a hendrerit purus. Quisque neque eros, gravida eu elit ac, pharetra elementum lectus. Pellentesque a tempor nisl. Vestibulum in augue nec massa egestas vestibulum sed ac neque.         
        <br>  Donec in nisl vitae diam venenatis sollicitudin. Vivamus in nisi in est porta efficitur. Sed eleifend cursus augue non aliquet. In egestas finibus sem, non cursus velit posuere non. Duis vel rutrum diam. Quisque justo leo, sodales et suscipit in, euismod a ipsum. Suspendisse laoreet consectetur porta. Donec eleifend erat ligula, at egestas dolor         
        <br>sagittis a.                  
      </p>
      <endora>               
    </div>               
    <div id="panel">    
      <h2>Postraní panel</h2>    
      <ul>
        <li>  <a id="p-novinky"   href="novinky.html">  <span>Novinky   </span> </a>  </li>
        <li>  <a id="p-projekty"  href="projekty.html"> <span>Projekty  </span> </a>  </li>
        <li>  <a id="p-historie"  href="historie.html"> <span>Historie  </span> </a> </li>
        <li>  <a id="p-kontakt"   href="kontakt.html">  <span>Kontakt   </span> </a>  </li>
      </ul>
    </div>               
  </div>        
 </body>

Potřeboval bych to v ID "PANEL". Každá položka má přiřazené své vlastní id, protože místo textu jsem použil obrázek. Pokud by to šlo vyřešit nějak jednodušeji, jakože to určitě půjde, nebráním se tomu. Používal jsem jen selský rozum.

Připojen obrázek.

Nahlásit jako SPAM
IP: 78.156.40.–
Reklama
Reklama
peter
~ Anonymní uživatel
2547 příspěvků
19. 11. 2014   #2
-
0
-

Nevim, jak v css pro html5, ale obvykle jsou efekty v javascriptu (docilene zmenou opacity) a ne css. Normalne si najdes googlem priklad nebo menu, ulozis, poeditujes a snazis se delat si zalohu kazde funkcni verze. Ja treba pri takovych upravach koncim nekdy i s cislem copy to *.js38, *.js39, *.js40 ...

google = fade effect jquery example
http://api.jquery.com/…ory/effects/
http://api.jquery.com/fadeIn/

google = fade menu jquery example
http://css-tricks.com/…rFadingMenu/

Jestli chces jenom js, tak neco malo mam na strance...
http://peter-mlich.wz.cz/…rx/index.htm
http://peter-mlich.wz.cz/…ni/menu4.htm
http://peter-mlich.wz.cz/…menustar.htm

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:e51d:27...–
Jakub
~ Anonymní uživatel
865 příspěvků
19. 11. 2014   #3
-
0
-

#2 peter
To jsem zkoušel, jenže nevím, jak to mám skloubit s tím, že mi to písmo mění barvu. Bohužel to tu není vidět, ale použil jsem metodu, že mám světlý a tmavý text nad sebou v jednom obrázku. Při najetí na odkaz se obrázek posune o 50px dolů. Ale teď nevím jak mám na to dodělat prolínání. V javascriptu jsem nikdy nedělal. Doufal jsem, že by někdo poradil konkrétní postup :) Každopádně díky za radu. Zkusím ty odkazy :)

Nahlásit jako SPAM
IP: 78.156.40.–
peter
~ Anonymní uživatel
2547 příspěvků
20. 11. 2014   #4
-
0
-

"V javascriptu jsem nikdy nedělal. "
To je tvuj osobni problem, ktery mne zas tak netrapi :) Ale klidne se sver i s dalsima :)
Nicmene, pokousel jsem se ti to uz rici, uvazuj takhle, kdyz ty neovladas, tak treba ani dalsi, co ctou css, takze se tu najde jen malo lidi, teri ti poradi, ze? A ja mam placenou praci, neco na miru pro cizi osobu mne zas tak taky netrapi. Sak on si poradi, kdyz bude chtit.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:9995:b9...–
Jakub
~ Anonymní uživatel
865 příspěvků
20. 11. 2014   #5
-
0
-

#4 peter
Tak tos mi fakt pomohl... Tyhle rádoby hrozně chytrý komentáře si nech. Vím jaký to je pomáhat druhým a to moc dobře. Jsem moderátor na fóru zaměřeném na Hardware, ale asi máš pravdu. Bude lepší poradit si sám a někde jinde než tady :) Díky moc za upozornění, že tady to patří ignorantovi ..

Nahlásit jako SPAM
IP: 78.156.40.–
peter
~ Anonymní uživatel
2547 příspěvků
21. 11. 2014   #6
-
0
-

Jakub - Jen jsem se ti pokusil rici, ze problem se tyka javascriptu a lide, kteri znaji html a css, jako ty, ti neporadi. A ja treba se zrikam toho to, resit za tebe. Ty priklady, co jsem uvedl, se daji pouzit k reseni problemu.
Jestli se ozve nekdo jiny, tomu nebranim, ale tys dal jasne najevo, ze problem resit nechces, ze ho ma nekdo kompletne vyresit za tebe. Ja to mam jako praci.

Nahlásit jako SPAM
IP: 2001:718:2601:1f7:8cec:98...–
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, 7 hostů

Podobná vlákna

Css menu — založil kall_ell

Css menu — založil 2stenly9

Menu v CSS — založil Honzisko

Css vysouvaci menu — založil martin

Nefunkcni CSS menu v iPhone — založil Cholerik

 

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