Strona 1 z 2
Wysuwane menu
Napisane: sobota, 9 kwietnia 2011, 18:09
przez bielu000
Jak zrobić wysuwane menu podobne do tego na tej stronie
http://graffika.pl/viewforum.php?f=77
Nie chodzi mi o sam skrypt tylko jak zrobić to żeby ta zakładka w menu wysuwała się wolniej(tak jak na tej stronie) a nie tak od razu po najechaniu
Re: Wysuwane menu
Napisane: sobota, 9 kwietnia 2011, 18:25
przez Lenson
Z tego co sobie przypominam mozna to chyba normalnie w stylach ustawić, opóźnienie chyba w którymś kursie sie juz z tym spotkałem, ale pytanien dalej do naszego wodza p. Arka xD
Re: Wysuwane menu
Napisane: sobota, 9 kwietnia 2011, 21:28
przez Morfidon
Dajesz firebug na ten element i od razu widzisz, że jest sobie coś takiego:
http://graffika.pl/styles/graffika/them ... enu-bg.png
czyli pełna grafika. Prawdopodobnie z-index tej grafiki jest niższy niż tego elementu brązowego, po najechaniu na "zakładkę" zmieniasz ułożenie względem pionu przy pomocy jQuery.
Re: Wysuwane menu
Napisane: sobota, 9 kwietnia 2011, 22:30
przez bielu000
Nie da sie tego jakos inaczej zrobić ? Nie przy pomocy jQuery nie wiem moze JS ?
Re: Wysuwane menu
Napisane: sobota, 9 kwietnia 2011, 23:30
przez Morfidon
jQuery to biblioteka JS
możesz sobie sam napisać to co jest w jQuery, ale będzie trudniej i zajmie to więcej czasu
Re: Wysuwane menu
Napisane: sobota, 9 kwietnia 2011, 23:49
przez bielu000
Dobra mam taki dokument
Code: Zaznacz cały
<html>
<head>
<title>jQuery - próba</title>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<link rel="Stylesheet" type="text/css" href="style.css">
<script>
$(document).ready(function() {
$('#pierwszy').click(function() {
$(this).css('color', 'red').hide('slow').show(3000); ;
});
$('a.link').click(function() {
alert($(this).attr('href'))
return false;
})
$("#balonik_stop")
.mouseover(function(){
$(this).stop().animate({height:300}, 500);
})
.mouseout(function(){
$(this).stop().animate({height:100}, 500);
});
});
</script>
</head>
<body>
<p>
<div id="balonik_stop" class="z_balonikiem">
Najedź na mnie
</div>
</p>
<p>
<div id="balonik_stop" class="z_balonikiem">
Najedź na mnie
</div>
</p>
</body>
</html>
działa ta funkcja ale tylklo do pierwszego diva a chciałbym żeby działał także do innych divów co tu trzeba zmienic ?
//Dodatkowo nie działa w Explolerze
Re: Wysuwane menu
Napisane: niedziela, 10 kwietnia 2011, 00:21
przez Lenson
A nie dało by rade tego na patęcie zrobić i przy pomocy pętli w php zwiekszac po prostu co pętle wysokość elementu ? ^^ z opoznieniem jakims tam ?
Re: Wysuwane menu
Napisane: niedziela, 10 kwietnia 2011, 00:25
przez bielu000
Jak chcesz to zrobic w php zeby bylo dynaczmicznie ? To ma byc po najechaniu myszka na odnosnik a nie wiem czy w php mozna cos takiego zrobic
Re: Wysuwane menu
Napisane: niedziela, 10 kwietnia 2011, 11:00
przez Morfidon
Użyj klasy, a nie identyfikatora (także w zapytaniu jQuery). Mówiłem w video kursie xhtml i css, że identyfikator jest unikalny i powinien być na stronie tylko JEDEN. Z tego powodu wybierając w jQuery po identyfikatorze, może się zdarzyć, że nie wybierze ich wszystkich, bo powinien być tylko jeden.
Re: Wysuwane menu
Napisane: niedziela, 10 kwietnia 2011, 12:18
przez bielu000
No tak faktycznie zapomnialem o tym, teraz po zmianie na klase działa...ale IE dalej mnie ignoruje i nie chce wprawić diva w ruch.
Dodaje pełny kod:
Code: Zaznacz cały
<html>
<head>
<title>jQuery - próba</title>
<script type="text/javascript" src="jquery-1.2.3.js"></script>
<link rel="Stylesheet" type="text/css" href="style.css">
<script type="text/javascript">
$(document).ready(function() {
$(".balonik_stop")
.mouseover(function(){
$(this).stop().animate({height:300}, 500);
})
.mouseout(function(){
$(this).stop().animate({height:100}, 500);
});
});
</script>
</head>
<body>
<p>
<div class="balonik_stop">
Najedź na mnie
</div>
</p>
<p>
<div <div class="balonik_stop">
Najedź na mnie 1
</div>
</p>
</body>
</html>
i jeszcze style.css
Code: Zaznacz cały
.page_hover_box {
padding:5px;
position:fixed;
right:-250px;
top:125px;
background:#687BC3;
overflow:hidden;
width:300px;
height:150px;
z-index:9999;
-moz-border-radius:5px;
-webkit-border-radius:5px;
-border-radius:5px;
-moz-box-shadow:0 1px 2px #333;
-webkit-box-shadow:0 1px 2px #333;
-box-shadow:0 1px 2px #333;
}
.balonik_stop {
width:200px;
height:30px;
text-align:left;
padding:10px;
font:bold 12px Tahoma;
color:#678CB1; border:2px solid #678CB1;
line-height:30px; background:#9DB2C9;
position:relative;
}
#div2 {
background-color: red;
width: 100px;
height: 100px;
}
