js menu rozwijane

krokffpp · Post autor: **krokffpp** » 06 lut 2009, 01:09:48

witam temat raczej znany, szukałem odpowiedzi na pytanie jak ładnie zrobić menu rozwijane w java script, z tym że chciałbym by zawartość rozwijała się po naciśnięciu na stałem co znaczy że jeśli będę miał ze trzy kategorie, to klikając na każdą z kolei będę miał 3x wysuniętą treść, czyli całość będzie widoczna i odwrotnie by było można zasuwać, to raczej większe wymagania czy mogę dostać jakiegoś linka do tutorialu lub radę?

kryzz · Post autor: **kryzz** » 06 lut 2009, 08:39:40

http://serwis.magazynyinternetowe.pl/ar ... _menu.html

krokffpp · Post autor: **krokffpp** » 06 lut 2009, 23:52:04

ten przykład jest naprawdę ładny, dzięki jednak nie dokładnie o to mi chodzi, ale poszukam jeszcze w tym serwisie może coś się znajdzie.

---- EDIT ----

proszę o radę znalezłem przykład, przeanalizowałem, a że z js mam początki zastanawiam się dlaczego tak jest że w kodzie który podaje, var view pobiera akapit zawsze z id paragrafu umieszczonego od góry?
chodzi o ten urywek kodu, jak zrobić by zmieniał się dynamicznie, tzn akapit = id który klikam?

Kod: Zaznacz cały

var view = akapit.style.display;

pominąłem zbędny kod, po naciśnięciu rozwija kod

Kod: Zaznacz cały

<script type="text/javascript">
 function PokazAkapit(id_paragrafu)
 {
  var akapit = document.getElementById(id_paragrafu);
  var odnosnik = document.getElementById('link');
  var view = akapit.style.display;
  if (view == "block")
   {
     odnosnik.innerHTML = "wiecej";
     akapit.style.display = "none";
   }
  if (view == "none")
   {
     odnosnik.innerHTML = "wstecz";
     akapit.style.display = "block";
   }
 }
 </script>
</head>  

<body>
 
<a href="#"onclick="PokazAkapit('more_second1');" id="link">wiecej</a></p>
<p id="more_second1" style="display: none;">1</p>

<a href="#"onclick="PokazAkapit('more_second2');" id="link">wiecej</a></p>
<p id="more_second2" style="display: none;">2</p>

<a href="#"onclick="PokazAkapit('more_second3');" id="link">wiecej</a></p>
<p id="more_second3" style="display: none;">3</p>

o co mi chodzi na przykładzie widać jak przyciskam link dolny, którykolwiek wartość display zmienia się zawsze dla pierwszego od góry:

http://g-center.y0.pl/java_menu_po_naci ... panel.html

---- EDIT ----

ps: oto link do artykułu

http://serwis.magazynyinternetowe.pl/ar ... _html.html

Post autor: **fuma** » 07 lut 2009, 06:23:02

http://www.stunicholls.com/ moze tutaj znajdziesz cos pomocnego

krokffpp · Post autor: **krokffpp** » 07 lut 2009, 14:23:35

jedna z bardziej cenionych się stron, design mówi za siebie wszędzie widnieje button donate, w dodatku po angielsku heh

znalazłem to czego szukałem chodzi tylko o sprawę pestkową w kodzie powyżej dzięki.

---- EDIT ----

po ściągnięciu kodu ze strony którą polecił fuma doszedłem do wniosku że nie jest tak źle z tym kodem jednak każdemu polecam wstępne zapoznanie się z kodem podobnym jednak ułożonym w formie szkolenia na stronie

http://serwis.magazynyinternetowe.pl/ar ... _html.html

---- EDIT ----

myślę o czymś zaprezentowanym tutaj:
http://www.stunicholls.com/menu/jquery-slide-1.html

jednak bez użycia jquery, kod który zapożyczyłem z magazynyinternetowe jest optymalniejszy, gdyby tylko ktoś mógł mi dać wskazówkę jak doprawić przykład który podałem, dzięki jeśli znajdzie się chętny.

Krzychson · Post autor: **Krzychson** » 08 lut 2009, 22:50:10

na podstawie tego robisz menu (wystarczy ze pozamieniasz to co tam jest na to co potrzebujesz):

Kod: Zaznacz cały

<dl id="nav">
    <dt><a href="#url">Home</a></dt>
    <dt><b>Sales</b></dt>
    <dd>
        <ul>

            <li><a href="#url">Digital SLR Cameras</a></li>
            <li><a href="#url">Interchangeable Lenses</a></li>
            <li><a href="#url">Flash Guns and Accessories</a></li>
            <li><a href="#url">Professional Tripods</a></li>
            <li><a href="#url">Filters & Lens Hoods</a></li>

        </ul>
    </dd>
    <dt><b>Services</b></dt>
    <dd>
        <ul>
            <li><a href="#url">Printing & Framing</a></li>
            <li><a href="#url">Photo Editing</a></li>

            <li><a href="#url">Storage & Backup</a></li>
        </ul>
    </dd>
    <dt><b>Contacts</b></dt>
    <dd>
        <ul>
            <li><a href="#url">Support</a></li>

            <li><a href="#url">Sales</a></li>
            <li><a href="#url">Buying</a></li>
            <li><a href="#url">Photographers</a></li>
            <li><a href="#url">Stockist</a></li>
            <li><a href="#url">General</a></li>
        </ul>

    </dd>
    <dt><b>Stores Location</b></dt>
    <dd>
        <ul>
            <li><a href="#url">South West Region</a></li>
            <li><a href="#url">North East Region</a></li>
            <li><a href="#url">Central Region</a></li>

        </ul>
    </dd>
    <dt><b>Contact Us</b></dt>
    <dd>
        <ul>
            <li><a href="#url">Email Addresses</a></li>
            <li><a href="#url">By Post</a></li>

            <li><a href="#url">Telephone Numbers</a></li>
        </ul>
    </dd>
    <dt><a href="#url">Privacy Policy</a></dt>
</dl>

a tu potrzebny kod CSS i JavaScript który umieszczasz w sekcji head:

Kod: Zaznacz cały

<style type="text/css">
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

#nav {padding:0; margin:0; font-family:georgia, serif; background:#fff;}
#nav a:hover {text-decoration:underline;}
#nav dt b, #nav dt a {display:block; font-weight:normal; font-size:26px; color:#060; height:35px; line-height:35px; padding-left:10px; cursor:pointer; width:200px;}
#nav dt b {background:url(arrow.gif) no-repeat left center;}
#nav dt a {color:#000; text-decoration:none;}
#nav dd {padding:0; margin:0;}
#nav dd ul {padding:0; margin:0; list-style:none;}
#nav dd ul li {padding-left:20px;}
#nav dd ul li a {font-size:15px; color:#000; text-decoration:none;}
</style>
<script src="jquery-1.2.6.min.js" type="text/javascript"></script>

<script type="text/javascript">
/* ================================================================ 
This copyright notice must be untouched at all times.
Copyright (c) 2008 Stu Nicholls - stunicholls.com - all rights reserved.
=================================================================== */

$(document).ready(function(){
    if($("#nav")) {
        $("#nav dd").hide();
        $("#nav dt b").click(function() {
            if(this.className.indexOf("clicked") != -1) {
                $(this).parent().next().slideUp(200);
                $(this).removeClass("clicked");
            }
            else {
                $("#nav dt b").removeClass();
                $(this).addClass("clicked");
                $("#nav dd:visible").slideUp(200);
                $(this).parent().next().slideDown(500);
            }
            return false;
        });
    }
});
</script>

---- EDIT ----

a tu plik JavaScriptu który musisz utoworzyc na serwerze:
http://www.stunicholls.com/menu/js/jquery-1.2.6.min.js

Hosting CBA.pl

Forum

js menu rozwijane

js menu rozwijane

Re: js menu rozwijane

Re: js menu rozwijane

Re: js menu rozwijane

Re: js menu rozwijane

Re: js menu rozwijane

Oferta

Ważne

Firma

Newsletter