Ogólne - Zrobienie menu
kryjryja - 06-03-2016, 22:42
Temat postu: Zrobienie menu
Witam. Powie mi kto¶ jak zrobić takie menu że ja się najedzie mysz± to się rozwija i jest kilka opcji do wybrania. Z góry dziękuje.
Oneitatsu - 07-03-2016, 02:23
było miliony razy omawiane - użyj czasem wyszukiwarki.
osobi¶cie, użyłbym jquery jako podstawki. https://api.jquery.com/slideToggle/ gdzie funkcję 'click' podmienia się czym¶ innym (np. 'mouseover'). takie co¶ trzeba zaopatrzyć w kolejne warunki, coby rzecz nie chowała się kiedy nie powinna itp.,itd. + styl.
w ramach przykładu co¶ bardzo prostego:
| Kod: |
do head:
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<style>
#ul1, #ul2, #ul3 { display: none; }
</style>
do body:
<span id="menu1">menu 1</span> • <span id="menu2">menu 2</span> • <span id="menu3">menu 3</span>
<ul id="ul1">
<li>1a</li>
<li>2a</li>
<li>3a</li>
</ul>
<ul id="ul2">
<li>1b</li>
<li>2b</li>
<li>3b</li>
</ul>
<ul id="ul3">
<li>1c</li>
<li>2c</li>
<li>3c</li>
</ul>
<script>
$( "#menu1" ).mouseover(function() {
$( "#ul1" ).slideToggle( "slow" );
$( "#ul2" ).slideUp( "slow" );
$( "#ul3" ).slideUp( "slow" );
});
$( "#menu2, #ul2" ).mouseover(function() {
$( "#ul1" ).slideUp( "slow" );
$( "#ul2" ).slideToggle( "slow" );
$( "#ul3" ).slideUp( "slow" );
});
$( "#menu3, #ul3" ).mouseover(function() {
$( "#ul1" ).slideUp( "slow" );
$( "#ul2" ).slideUp( "slow" );
$( "#ul3" ).slideToggle( "slow" );
});
</script>
|
- najechanie kursorem na poszczególne menusy powoduje wywołanie kolejnych list + podstawowe sprz±tanie po sobie.
kryjryja - 07-03-2016, 12:20
Dzięki działa
|
|
|
