Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów
poziome Menu w CSS/JS - Wersja do druku

+- Forum Webmastera, HTML, CSS, PHP, MySQL, Hosting, Domeny - Forum dla Webmasterów (https://www.webmastertalk.pl)
+-- Dział: Technologie internetowe - tworzenie stron WWW (https://www.webmastertalk.pl/forum-technologie-internetowe-tworzenie-stron-www)
+--- Dział: xHTML, CSS, JavaScript (https://www.webmastertalk.pl/forum-xhtml-css-javascript)
+--- Wątek: poziome Menu w CSS/JS (/thread-poziome-menu-w-css-js)

poziome Menu w CSS/JS - kuzi1987 - 29-05-2010

Witam,

proszę Was o pomoc ponieważ korzystając z tutoriali w sieci nie uzyskuję efektu jaki bym chciał.
mianowicie: chciałbym stworzyć poziome menu w którym po najechaniu na przycisk "A" rozwijało by się z 4 pozycjami wtedy po najechaniu np. na drugą od góry żeby rozwijały się pod nią kolejne trzy (na pierwszym załączniku: tekst niewyboldowany)
To samo działanie w przypadku najechania na przycisk "B" ale mniej opcji (drugi załącznik).

1.
[Obrazek: 2vkcfir.jpg]


2.
[Obrazek: 2ik4g3o.jpg]

oto uboga zawartość pliku html:
Kod:
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
  <meta http-equiv="Content-Type" content="text/html">
  <meta http-equiv="Content-Language" content="pl">
  <link rel="shortcut icon" href="/favicon.ico">
  <meta name="Keywords" content="slowa kluczowe">
  <meta name="Description" content="opis">
<title>tytuł</title>
<style type="text/css">

table,tr,td {font-family: Arial;}
hr {color: #4d4d4d;}

#main {margin: 0 auto; padding: 0; width: 100%; background-color: #fafafa;}
#td_button1 {width: 14%; height: 24px; text-align: center; font-size: 11px; color: #3c5997; background-color: #fff; cursor: pointer;}
#td_button2 {width: 14%; height: 24px; text-align: center; font-size: 11px; color: #fafafa; background-color: #3c5997; text-shadow: 1px 1px #4c4c4c; cursor: pointer;}
#td_button_search {width: 14%; height: 24px; text-align: right; font-size: 11px; color: #3c5997; background-color: #fff;}
#top {font-size: 22px; color: #3c5997; text-align: center; text-shadow: 1px 1px #4d4d4d; font-weight: bold; }
#szukajka {width: 150; height: 24px; color: #4a4a4a; font-size: 12px;}
#lewa {width: 120px; text-align: center; font-size: 22px; font-weight: bold; color: #4d4d4d; text-shadow: 2px 2px #f0f0f0;}
#srodek {text-align: left; font-size: 13px; vertical-align: top; color: #4d4d4d; text-shadow: 1px 1px #f0f0f0;}
#tresc {font-size: 22px; color: #4d4d4d; text-align: center; text-shadow: 1px 1px #4d4d4d; font-weight: bold; }
#prawa {width: 120px; text-align: center; font-size: 22px; font-weight: bold; color: #4d4d4d; text-shadow: 2px 2px #f0f0f0;}
#copy {text-align: center; font-size: 9px;}

</style>
</head>
<body>
<table id="main" cellspacing="3" cellpadding="0" border="0">
    <tbody>
        <tr>
            <td>
                <table width="100%">
                    <tbody>
                        <tr>
                            <td id="td_button1">1</td>
                            <td id="td_button1">2</td>
                            <td id="td_button1">3</td>
                            <td id="td_button1">4</td>
                            <td id="td_button1">5</td>
                            <td id="td_button1">6</td>
                            <td id="td_button_search"><textarea id="szukajka" onFocus="this.value=''">szukaj...</textarea></td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table cellpadding="3" width="100%" border="1">
                    <tbody>
                        <tr>
                            <td id="top" height="120">
                            G R A F I K A
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table width="100%" style="font-size: 10px;">
                    <tbody>
                        <tr>
                            <td id="td_button2">A</td>
                            <td id="td_button2">B</td>
                            <td id="td_button2">C</td>
                            <td id="td_button2">D</td>
                            <td id="td_button2">E</td>
                            <td id="td_button2">F</td>
                            <td id="td_button2">G</td>
                        </tr>
                        
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table height="100%" width="100%">
                    <tbody>
                        <tr>
                            <td id="prawa">
                                <table border="1" cellpadding="3">
                                    <tbody>
                                        <tr>
                                            <td id="prawa" width="120" height="600">B<br/>A<br/>N<br/>E<br/>R<br/><br/>I<br/>N<br/>F<br/>O<br/>R<br/>M<br/>A<br/>C<br/>Y<br/>J<br/>N<br/>Y<br/>
                                            </td>
                                        </tr>
                                    </tbody>    
                                </table>
                            </td>
                            <td id="srodek">
                            
                                <table border="1" cellpadding="3" width="100%" height="100%">
                                    <tbody>
                                        <tr>
                                            <td id="tresc">T R E Ś Ć<br><br>
                                            </td>
                                        </tr>
                                    </tbody>    
                                </table>
                            
                            </td>
                            
                            <td id="prawa">
                                <table border="1" cellpadding="3">
                                    <tbody>
                                        <tr>
                                            <td id="prawa" width="120" height="600">B<br/>A<br/>N<br/>E<br/>R<br/><br/>R<br/>E<br/>K<br/>L<br/>A<br/>M<br/>O<br/>W<br/>Y
                                            </td>
                                        </tr>
                                    </tbody>    
                                </table>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
        <tr>
            <td>
                <table width="100%">
                    <tbody>
                        <tr>
                            <td id="copy" height="24"><hr>&copy; kuzi1987</td>
                        </tr>
                    </tbody>
                </table>
            </td>
        </tr>
    </tbody>
</table>
</body>
</html>

Jeżeli ktoś zechciałby mi pomóc to proszę o zgłoszenie mailem, a postaram się odwdzięczyć w uzgodniony sposób.

Pozdrawiam
Qzi

RE: poziome Menu w CSS/JS - Leja - 29-05-2010

luknij może tu http://www.dhtmlgoodies.com/index.html?page=menuScripts bo nie chce mi się szukac tego skryptu