js menu rozwijane
js menu rozwijane
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ę?
Pozdrawiam :jib
Jesteśmy tym, co w swoim życiu powtarzamy.
Doskonałość nie jest jednorazowym aktem, lecz nawykiem.
----
Nexto - e-book gratis
Jesteśmy tym, co w swoim życiu powtarzamy.
Doskonałość nie jest jednorazowym aktem, lecz nawykiem.
----
Nexto - e-book gratis
Re: js menu rozwijane
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?
pominąłem zbędny kod, po naciśnięciu rozwija kod
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
---- 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;
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>
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
Pozdrawiam :jib
Jesteśmy tym, co w swoim życiu powtarzamy.
Doskonałość nie jest jednorazowym aktem, lecz nawykiem.
----
Nexto - e-book gratis
Jesteśmy tym, co w swoim życiu powtarzamy.
Doskonałość nie jest jednorazowym aktem, lecz nawykiem.
----
Nexto - e-book gratis
- fuma
- Przyjaciel CBA
- Posty: 11168
- Rejestracja: 01 sie 2005, 14:57:56
- Lokalizacja: z jajka niespodzianki :P
- Płeć:
- User Agent:
Re: js menu rozwijane
http://www.stunicholls.com/ moze tutaj znajdziesz cos pomocnego
Re: js menu rozwijane
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.
---- 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.
Pozdrawiam :jib
Jesteśmy tym, co w swoim życiu powtarzamy.
Doskonałość nie jest jednorazowym aktem, lecz nawykiem.
----
Nexto - e-book gratis
Jesteśmy tym, co w swoim życiu powtarzamy.
Doskonałość nie jest jednorazowym aktem, lecz nawykiem.
----
Nexto - e-book gratis
Re: js menu rozwijane
na podstawie tego robisz menu (wystarczy ze pozamieniasz to co tam jest na to co potrzebujesz):
a tu potrzebny kod CSS i JavaScript który umieszczasz w sekcji head:
---- EDIT ----
a tu plik JavaScriptu który musisz utoworzyc na serwerze:
http://www.stunicholls.com/menu/js/jquery-1.2.6.min.js
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>
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>
a tu plik JavaScriptu który musisz utoworzyc na serwerze:
http://www.stunicholls.com/menu/js/jquery-1.2.6.min.js
Wyobraźnia bez wiedzy może stworzyć rzeczy piękne.
Wiedza bez wyobraźni najwyżej doskonałe.
Albert Einstein
Wiedza bez wyobraźni najwyżej doskonałe.
Albert Einstein