Autor Zpráva
antimattero
Profil *
#1 · Zasláno: 20. 2. 2012, 01:09:47 · Upravil/a: Moderátor (editace znemožněna) 20. 2. 2012, 16:16:37
Odpovědět Citovat
zdravim,
normalne tohle nedelam, ale dlouho uz patram po vychodisku, ktere se snazim vzdy dohledat samostatne :) , ale tohle jsem nikde nedohledal... zrejme nekde delam jen malou chybu.
poskladal jsem menu pomoci divu, ktere sice funguje, ale sem tam zlobi... vse viz nize -->

/* HTML kod >>>ulozeny jako php>>> pouzivam funkci include>>> kod neni cely pro minimalizaci, myslim odkazy apod. struktura je stejna*/ 

<link href="menu2.css" rel="stylesheet" type="text/css"  />
<script type="text/javascript" language="javascript" src="java_scripty/jquery.js"></script>
<script type="text/javascript" language="javascript" src="java_scripty/jfuncs.js"></script>
</head>

<body>
<div id="menu">
        <div id="menu_domu" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            MP.cz
        </div>
        <div id="menu_penize" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Peníze
            <div id="penize">
                <div id="penize_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="penize_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="penize_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="menu_pojisteni" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Pojištění
            <div id="pojisteni">
                <div id="pojisteni_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="pojisteni_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="pojisteni_forum">
                    <ul>
                        <li></li>
                       </ul>
                </div>
            </div>
        </div>
        <div id="menu_utility" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Utility
            <div id="utility">
                <div id="utility_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="utility_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="utility_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="menu_mobily" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Mobily
            <div id="mobily">
                <div id="mobily_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="mobily_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="mobily_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="menu_internet" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Internet
            <div id="internet">
                <div id="internet_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="internet_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="internet_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="menu_nakupy" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Nákupy
            <div id="nakupy">
                <div id="nakupy_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="nakupy_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="nakupy_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="menu_slevy" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Slevy
            <div id="slevy">
                <div id="slevy_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="slevy_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="slevy_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
        <div id="menu_forum" onmouseover="ShowSubs( this );" onmouseout="HideSubs( this );">
            Fórum
            <div id="">
                <div id="internet_prehled_produktu">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="internet_clanky_recenze">
                    <ul>
                        <li></li>
                    </ul>
                </div>
                <div id="internet_forum">
                    <ul>
                        <li></li>
                    </ul>
                </div>
            </div>
        </div>
</div>
</body>

/* jquery je myslim verze 1.5 >>> jfuncs.js viz nize*/ 

function ShowSubs( me ){
        $( me ).children().show();
    }
    
    function HideSubs( me ){
        $( me ).children().hide();
    }

velice jednoduche, ale zatim se ucim :)

/* css je asi to co zlobi, ale nejsem si jist a proto jsem to radeji zaradil do teto sekce, jelikoz pouzivam java funkce... */ 


/* odkaz domu*/
#menu_domu { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background: #444; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_domu div { display:none;}

/* nabidka penize*/
#menu_penize { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background:#6C216F; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_penize div{ display:none;}
#penize { position: relative; margin: 15px auto auto -109px; width: 970px; height: 320px; background:#6C216F; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#penize_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#penize_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#penize_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}

/* nabidka pojisteni*/
#menu_pojisteni { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background:#DA2B1D; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_pojisteni div { display:none;}
#pojisteni { position: relative; margin: 15px auto auto -218px; width: 970px; height: 320px; background:#DA2B1D; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#pojisteni_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#pojisteni_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#pojisteni_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_pojisteni a:link { color:#FFF; text-decoration:none;}
#menu_pojisteni a:visited { color:#FFF; text-decoration:none;}
#menu_pojisteni a:hover { color:#FFF; text-decoration:none;}

/* nabidka utility*/
#menu_utility { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background: #41B022; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_utility div { display:none;}
#utility { position: relative; margin: 15px auto auto -327px; width: 970px; height: 320px; background: #41B022; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#utility_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#utility_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#utility_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_utility a:link { color:#FFF; text-decoration:none;}
#menu_utility a:visited { color:#FFF; text-decoration:none;}
#menu_utility a:hover { color:#FFF; text-decoration:none;}

/* nabidka mobily*/
#menu_mobily { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background: #0073E6; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_mobily div { display:none;}
#mobily { position: relative; margin: 15px auto auto -436px; width: 970px; height: 320px; background:#0073E6; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#mobily_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#mobily_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#mobily_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_mobily a:link { color:#FFF; text-decoration:none;}
#menu_mobily a:visited { color:#FFF; text-decoration:none;}
#menu_mobily a:hover { color:#FFF; text-decoration:none;}

/* nabidka internet*/
#menu_internet { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background: #D5D500; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_internet div { display:none;}
#internet { position: relative; margin: 15px auto auto -545px; width: 970px; height: 320px; background:#D5D500; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#internet_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#internet_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#internet_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_internet a:link { color:#FFF; text-decoration:none;}
#menu_internet a:visited { color:#FFF; text-decoration:none;}
#menu_internet a:hover { color:#FFF; text-decoration:none;}

/* nabidka nakupy*/
#menu_nakupy { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background:#FFA300; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_nakupy div { display:none;}
#nakupy { position: relative; margin: 15px auto auto -654px; width: 970px; height: 320px; background:#FFA300; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#nakupy_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#nakupy_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#nakupy_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_nakupy a:link { color:#FFF; text-decoration:none;}
#menu_nakupy a:visited { color:#FFF; text-decoration:none;}
#menu_nakupy a:hover { color:#FFF; text-decoration:none;}

/* nabidka slevy*/
#menu_slevy { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background: #00366C; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_slevy div { display:none;}
#slevy { position: relative; margin: 15px auto auto -763px; width: 970px; height: 320px; background:#00366C; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#slevy_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#slevy_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#slevy_forum { position: relative; float:left; width: 310px; height: 300px; background:#FFFFFF; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_slevy a:link { color:#FFF; text-decoration:none;}
#menu_slevy a:visited { color:#FFF; text-decoration:none;}
#menu_slevy a:hover { color:#FFF; text-decoration:none;}

/* nabidka forum*/
#menu_forum { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #FFF; font-family:Verdana, Geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#FFF; background: #B00058; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_forum div { display:none;}
#menu_forum a:link { color:#FFF; text-decoration:none;}
#menu_forum a:visited { color:#FFF; text-decoration:none;}
#menu_forum a:hover { color:#FFF; text-decoration:none;}



urcite tam jsou nejake mouchy, jako zbytecne se opakujici kod pro spoustu veci se daji pouzivat carky na oddeleni, ale ja to mam takhle mozna prehlednejsi, aspon si to myslim :)
no k veci kdyz pouzivam funkci na zobrazeni v css kodu mam vzdy jeden podDIV skryty tedy "display: none;", aby se tedy hned ze startu nezobrazil, ale kdyz ho neskryju vse funguje, jen pri najeti stranky vyskoci vsechny podDIVY a po najeti na tlacitka zase zmizi a opet vse normalne funguje... takze to je bug, ktery resi preci "disply: none;", no ne??? ale pokud ho pouziju, jakozto ze musim, jinak by ta funkce nemela smysl, tak mi vse normalne funguje velky barevny div normalne vyjizdi, ale ty tri mensi DIVY v nem nejsou videt. zkousel jsem "position: absolute;" zkousel jsem z-index, overflow >>>nothing is change. takze jsem zde a prosim o radu za kterou bude velice vdecen. predem dekuji "guys"[/pre]
<link href="menu2.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" language="javascript" src="java_scripty/jquery.js"></script>
<script type="text/javascript" language="javascript" src="java_scripty/jfuncs.js"></script>
</head>

<body>
<div id="menu">
<div id="menu_domu" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
mp.cz
</div>
<div id="menu_penize" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
peníze
<div id="penize">
<div id="penize_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="penize_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="penize_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_pojisteni" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
pojištění
<div id="pojisteni">
<div id="pojisteni_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="pojisteni_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="pojisteni_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_utility" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
utility
<div id="utility">
<div id="utility_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="utility_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="utility_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_mobily" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
mobily
<div id="mobily">
<div id="mobily_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="mobily_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="mobily_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_internet" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
internet
<div id="internet">
<div id="internet_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="internet_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="internet_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_nakupy" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
nákupy
<div id="nakupy">
<div id="nakupy_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="nakupy_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="nakupy_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_slevy" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
slevy
<div id="slevy">
<div id="slevy_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="slevy_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="slevy_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
<div id="menu_forum" onmouseover="showsubs( this );" onmouseout="hidesubs( this );">
fórum
<div id="">
<div id="internet_prehled_produktu">
<ul>
<li></li>
</ul>
</div>
<div id="internet_clanky_recenze">
<ul>
<li></li>
</ul>
</div>
<div id="internet_forum">
<ul>
<li></li>
</ul>
</div>
</div>
</div>
</div>
</body>
[/pre]

/* jquery je myslim verze 1.5 >>> jfuncs.js viz nize*/ 

function showsubs( me ){
        $( me ).children().show();
    }
    
    function hidesubs( me ){
        $( me ).children().hide();
    }

velice jednoduche, ale zatim se ucim :)

/* css je asi to co zlobi, ale nejsem si jist a proto jsem to radeji zaradil do teto sekce, jelikoz pouzivam java funkce... */ 


/* odkaz domu*/
#menu_domu { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background: #444; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_domu div { display:none;}

/* nabidka penize*/
#menu_penize { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background:#6c216f; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_penize div{ display:none;}
#penize { position: relative; margin: 15px auto auto -109px; width: 970px; height: 320px; background:#6c216f; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#penize_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#penize_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#penize_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}

/* nabidka pojisteni*/
#menu_pojisteni { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background:#da2b1d; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_pojisteni div { display:none;}
#pojisteni { position: relative; margin: 15px auto auto -218px; width: 970px; height: 320px; background:#da2b1d; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#pojisteni_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#pojisteni_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#pojisteni_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_pojisteni a:link { color:#fff; text-decoration:none;}
#menu_pojisteni a:visited { color:#fff; text-decoration:none;}
#menu_pojisteni a:hover { color:#fff; text-decoration:none;}

/* nabidka utility*/
#menu_utility { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background: #41b022; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_utility div { display:none;}
#utility { position: relative; margin: 15px auto auto -327px; width: 970px; height: 320px; background: #41b022; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#utility_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#utility_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#utility_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_utility a:link { color:#fff; text-decoration:none;}
#menu_utility a:visited { color:#fff; text-decoration:none;}
#menu_utility a:hover { color:#fff; text-decoration:none;}

/* nabidka mobily*/
#menu_mobily { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background: #0073e6; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_mobily div { display:none;}
#mobily { position: relative; margin: 15px auto auto -436px; width: 970px; height: 320px; background:#0073e6; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#mobily_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#mobily_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#mobily_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_mobily a:link { color:#fff; text-decoration:none;}
#menu_mobily a:visited { color:#fff; text-decoration:none;}
#menu_mobily a:hover { color:#fff; text-decoration:none;}

/* nabidka internet*/
#menu_internet { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background: #d5d500; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_internet div { display:none;}
#internet { position: relative; margin: 15px auto auto -545px; width: 970px; height: 320px; background:#d5d500; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#internet_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#internet_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#internet_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_internet a:link { color:#fff; text-decoration:none;}
#menu_internet a:visited { color:#fff; text-decoration:none;}
#menu_internet a:hover { color:#fff; text-decoration:none;}

/* nabidka nakupy*/
#menu_nakupy { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background:#ffa300; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_nakupy div { display:none;}
#nakupy { position: relative; margin: 15px auto auto -654px; width: 970px; height: 320px; background:#ffa300; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#nakupy_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#nakupy_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#nakupy_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_nakupy a:link { color:#fff; text-decoration:none;}
#menu_nakupy a:visited { color:#fff; text-decoration:none;}
#menu_nakupy a:hover { color:#fff; text-decoration:none;}

/* nabidka slevy*/
#menu_slevy { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background: #00366c; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_slevy div { display:none;}
#slevy { position: relative; margin: 15px auto auto -763px; width: 970px; height: 320px; background:#00366c; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#slevy_prehled_produktu { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#slevy_clanky_recenze { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#slevy_forum { position: relative; float:left; width: 310px; height: 300px; background:#ffffff; margin: 10px auto 10px 10px; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_slevy a:link { color:#fff; text-decoration:none;}
#menu_slevy a:visited { color:#fff; text-decoration:none;}
#menu_slevy a:hover { color:#fff; text-decoration:none;}

/* nabidka forum*/
#menu_forum { position:relative; width: 99px; height: 40px; line-height: 30px; border: 5px solid #fff; font-family:verdana, geneva, sans-serif; font-weight: bold; font-size:12px; text-align:center; color:#fff; background: #b00058; float:left; -moz-border-radius: 10px; -webkit-border-radius: 10px;}
#menu_forum div { display:none;}
#menu_forum a:link { color:#fff; text-decoration:none;}
#menu_forum a:visited { color:#fff; text-decoration:none;}
#menu_forum a:hover { color:#fff; text-decoration:none;}



urcite tam jsou nejake mouchy, jako zbytecne se opakujici kod pro spoustu veci se daji pouzivat carky na oddeleni, ale ja to mam takhle mozna prehlednejsi, aspon si to myslim :)
no k veci kdyz pouzivam funkci na zobrazeni v css kodu mam vzdy jeden poddiv skryty tedy "display: none;", aby se tedy hned ze startu nezobrazil, ale kdyz ho neskryju vse funguje, jen pri najeti stranky vyskoci vsechny poddivy a po najeti na tlacitka zase zmizi a opet vse normalne funguje... takze to je bug, ktery resi preci "disply: none;", no ne??? ale pokud ho pouziju, jakozto ze musim, jinak by ta funkce nemela smysl, tak mi vse normalne funguje velky barevny div normalne vyjizdi, ale ty tri mensi divy v nem nejsou videt. zkousel jsem "position: absolute;" zkousel jsem z-index, overflow >>>nothing is change. takze jsem zde a prosim o radu za kterou bude velice vdecen. predem dekuji "guys"[
peta
Profil
#2 · Zasláno: 20. 2. 2012, 14:06:18 · Upravil/a: peta o 3 minuty později
Odpovědět Citovat
Jaky mas prohlizec? Jestli je to IE nebo FF, pak je to v poradku. Jestli je to jiny, tak ty jsou ve vyvoji. Od vyvojovych verzi necekej zazraky. 

#menu_slevy div { display:none;}
Nastavis vsechny divy na none. 
#menu_slevy div, #menu_slevy div div, #menu_slevy div div div, atd...

$( me ).children()
Tohle, dle meho, vrati jen primo jen #menu_slevy div, ale #menu_slevy div div zustane hidden. Takze se to chova spravne, kdyz se to nezobrazi.
Co kdybys misto toho menil className? 
#menu_slevy div.off { display:none;}
#menu_slevy div.on { display:block;}
Neco jako toto, pripadne vyuzij jquery zapis pro class... 
$( me ).children().id().className = 'on';
$( me ).children().id().className = 'off';
Keeehi
Profil
#3 · Zasláno: 20. 2. 2012, 14:28:32
Odpovědět Citovat
peta:
„Jaky mas prohlizec? Jestli je to IE nebo FF, pak je to v poradku. Jestli je to jiny, tak ty jsou ve vyvoji. Od vyvojovych verzi necekej zazraky.“
Takovou blbost jsem už dlouho neslyšel. I kdyby to byla pravda, tak na tom přece nezáleží. Ty stránky nedělá jen pro sebe, takže by to muselo fungovat správně i pro návštěvníky s "nedokončenými" prohlížeči.

antimattero:
Takový tuny kódu, kdo to má číst? Prosím o odkaz na živou ukázku.

Jinak přidávat těm divům natvrdo display:none; není dobrý nápad, jelikož návštěvníci bez JS nemají možnost si je zobrazit. Takže správný postup je ty divy hned po načtení stránky pomocí JS skrýt. Pokud se skryjí, udělal to JS, takže je i JS může znovu zobrazit. Pokud návštěvník JS zapnutý nemá, divy se neskryjí a zůstanou tak dostupné.


„jelikoz pouzivam java funkce“
Časté potíže, zajímavosti a poučné debaty » JavaScript není Java
antimattero
Profil *
#4 · Zasláno: 20. 2. 2012, 15:10:30
Odpovědět Citovat
antimattero:
peta:
„Jaky mas prohlizec? Jestli je to IE nebo FF, pak je to v poradku. Jestli je to jiny, tak ty jsou ve vyvoji. Od vyvojovych verzi necekej zazraky.“

testuju samozrejme pro vsechny prohlizece, ale s IE jsou problemy snad na vsech frontach. vzdycky se musi pro nej neco specialne dodelavat.
---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
jinak skryvat to pomoci jquery ID/On/Off je dobry napad nicmene jak ctu dole prispevek ok Keeehi, ze JS nemusi mit dotycny zapnuty, docela vazne zacinam uvazovat o predelavku jen do cisteho textu... :)
spise bych resil pomoci nejake funkce zjistit zda dotycny ma zapnuty JS a pokud ne vyskakovacim oknem ho na to upozornit.

Keeehi:
„Takový tuny kódu, kdo to má číst? Prosím o odkaz na živou ukázku.“

zivou ukazku mam pouze na svem loclahostu :) sorry about that... anyway taky diky za dobrou pripominku o zapnutych JS, kterou budu muset nejak doresit
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------
nicmene jsem to vyresil tim, ze jsem spoustu divu vyhazel a nasazel jsem tam spoustu tabulek... ted resim opet verticalni zarovani, ktere pres vertical-align nefunguje tkaze asi pouziju stare dobre vlign
>>>>>>>>>>>>> a taky border-radius vIE??? wtf? nebudu prece vse resit pres nejake dodatecne pie.htc soubory... ne, ale vazne wtf??? :)
Keeehi
Profil
#5 · Zasláno: 20. 2. 2012, 15:23:52
Odpovědět Citovat
antimattero:
„spise bych resil pomoci nejake funkce zjistit zda dotycny ma zapnuty JS a pokud ne vyskakovacim oknem ho na to upozornit.“
1) To je prasárna. Navíc c když si ho někdo zapnout nemůže?
2) Ani se ti to nepovede. Jak chceš bez JS zprovoznit to vyskakovací okno?

Navíc jsem i v mém příspěvku psal postup, jak to udělat, aby to fungovalo pro zapnutý i vypnutý JS.
antimattero
Profil *
#6 · Zasláno: 20. 2. 2012, 15:53:01
Odpovědět Citovat
Keeehi:
1) no zacinam chapat, proc jsem tak dlouho drzel ruce od jS... nicmene pokud by dotycny nemel JS a vsechny divy by byly zobrazeny pri nacteni stranky, jeden druheho by preci prekryval???
2) v dnesni dobe prohlizec bez moznosti zapnuti jS? jak to vlastne myslis? kolik percentuelne lidi tuto moznost nema? 1% linux z toho tak 0,2% bez teto moznosti :) ne opravdu kdo tuto moznost nema?
Keeehi
Profil
#7 · Zasláno: 20. 2. 2012, 16:14:45
Odpovědět Citovat
antimattero:
„jeden druheho by preci prekryval“
Záleží na tom, jak to máš napsané. Ale není problém aby byly všechny za sebou. Dokonce je to výchozí chování.

2) Počkej si na Chamurappiho. Dá ti rozhodně fundovanější odpověď, než bych ti mohl poskytnout já.
antimattero
Profil *
#8 · Zasláno: 20. 2. 2012, 19:08:59
Odpovědět Citovat
Keeehi:
„2) Počkej si na Chamurappiho. Dá ti rozhodně fundovanější odpověď, než bych ti mohl poskytnout já.“

ok kdo si pocka ten se docka... :)
-------------------------------------------------------------------
asi jsem prisel na nejlepsi reseni a to je nepouzivat jS akorat budu muset predelat celkem pomerne dost stranek, kde mam nadherne rozeviraci tabulky se spoustou udaju, ktere zaberou pomerne dost mista pokud nejsou takto formatovany... kazdopadne to byla jedna chyba, ktera me stala spoustu casu, ale ponaucila me... ono to menu asi vytvorim jen pomoci CSS s tim uz snad nikde problem neni az na IE ovsem, kde se pripisou nejake vyjimky... jak jinak vytvorit fungujici menu? :)
antimattero
Profil *
#9 · Zasláno: 20. 2. 2012, 22:43:03 · Upravil/a: Moderátor (editace znemožněna) 21. 2. 2012, 09:36:12
Odpovědět Citovat
peta:
tak jsem to nakonec vyresil pomoci >>>> 
#menu div div { visibility:hidden;}
#menu div:hover div { visibility: visible;}
fungovat to funguje i IE uz dobre podporuje CSS a zatim jsem v zadnem prohlizeci nezaznamenal nejaky problem... takze od jS odchazim tedy co se menu tyce, jelikoz je to docela dulezita cast na strance a resit standarty a nestandarty je docela vycerpavajici :)
------------------------------------------------------------------------------
dokonceno>vyreseno> smazat please> cheers guys for ya help :)
Moderátor Chamurappi: Piš laskavě česky, američane…
peta
Profil
#10 · Zasláno: 21. 2. 2012, 15:29:07 · Upravil/a: peta o 5 minut později
Odpovědět Citovat
antimattero: jj, hlavni je pochopit, proc to dela, na reseni uz se prijde. Problem se ale js v podstate netykal, jen css. (ja jen, ze porad zduraznujes, jak je js spatne)

Co se tyce prohlizecu, tak existuji prohlizece obrazove, dotykove a hlasove.
Hlasovy vystup cte, co je na strance. Co tam neni, nevidi. Pripadne reaguje na hlasove prikazy.
Hlasovy vstup reaguje na hlasove prikazy, vyslovena slova. Prikaz: hybej prstem 30 stupnu, stop. To asi ne :)
Dotykovy reaguje na dotyk nebo pohyb. jezdit prstem po obrazovce nedoporucuji divkam s nehty. Poskrabou to.

Cili, jestli ti muzu dopurucit, udelej stranku na dotyk, pro tablety. Aby se nic nerozbalovalo a aby menu bylo jednoduche.
Ma znama je slepa. Ma urcite IE, ma urcite FF, ma urcite program pro cteni textu hlasem. Co ji to neprecte, neexistuje a nema jak existenci zjistit. Pokud je neco display:none a objevi se na mouseover, tak to je pro ni neresitelny ukol. nicmene na pc dokaze provedet veci asi 3x rychleji nez ja pres klavesove zkratky a o nekterych jsem ani netusil, ze jdou s pc delat. Jeji manzel si umi nainstalovat linux. Jediny problem mel se skype, ze mu to cosi odmitalo cist text.
antimattero
Profil *
#11 · Zasláno: 24. 2. 2012, 00:06:44
Odpovědět Citovat
peta:
„ja jen, ze porad zduraznujes, jak je js spatne“
no jedna se mi jen o to, aby vse fungovalo na vsech zarizenich a vse bylo zobrazeno, tak jak ma a to mi jS znemoznuje viz. diskuze na vrchu... nejak jsem se jS vyhybal jak to slo a bohuzel se vyhybati budu i nadale, jelikoz i v dnesni dobe je s tim u spousty lidi problem se zobrazenim :()

„Cili, jestli ti muzu dopurucit, udelej stranku na dotyk, pro tablety. Aby se nic nerozbalovalo a aby menu bylo jednoduche.“
jinak na mem htc rootnutem telefonu s androidem (snad s klasickym OP od androidu, posledni je myslim 4.0 nebude zase takovy rozdil) vse mi funguje prefektne a tak jak ma... totiz nepouzivam ani absolutni pozicovani... vlastne ani nevim, co to "absolute" je ??? :)))
Časová prodleva: 12 let

Vaše odpověď

Mohlo by se hodit

Neumíte-li správně určit příčinu chyby, vkládejte odkazy na živé ukázky.
Užíváte-li nějakou cizí knihovnu, ukažte odpovídajícím, kde jste ji vzali.

Užitečné odkazy:

Prosím používejte diakritiku a interpunkci.

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

0