GoldenLine
Zaloguj się

konto usunięte

Temat: Menu js

menu ma jedna belke główna załóżmy ze jest w div id="top" oraz belke pomocnicza np div id="bottom". W belce pomocniczej maja się wyświetlać np. kategorie artykułów gdy najedziemy na artykuły. Z css, xhtml i php aby pobrac te kategotie nie bedzie problemu. Nie wiem poprostu jak za pomocą js zmienic zawartosc #bottom po najechaniu na linka z #top. Zawartosc #bottom ma sie zmienic dopiero wtedy gdy najedziemy na inny link z #top
Link do wypowiedziLink

konto usunięte

Temat: Menu js

Może takie coś? 





<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

  <head>

    <title></title>

    <script type="text/javascript" src=

    "http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js">

</script>

    <script type="text/javascript">

//<![CDATA[

    $(document).ready(function() {

		$("#zmienZawartosc1").mouseover(function() {

			$("#bottom").html(

			"<ul><li><a href=#kategoria1>1Kategoria1</a></li><li><a href=#kategoria2>1Kategoria2</a></li><li><a href=#kategoria3>1Kategoria3</a></li><li><a href=#kategoria4>1Kategoria4</a></li></ul>"

		); });

		$("#zmienZawartosc2").mouseover(function() {

		   $("#bottom").html(

			"<ul><li><a href=#kategoria1>2Kategoria1</a></li><li><a href=#kategoria2>2Kategoria2</a></li><li><a href=#kategoria3>2Kategoria3</a></li></ul>"

		); });

		$("#zmienZawartosc3").mouseover(function() {

			$("#bottom").html(

			"<ul><li><a href=#kategoria1>3Kategoria1</a></li><li><a href=#kategoria2>3Kategoria2</a></li><li><a href=#kategoria4>3Kategoria4</a></li></ul>"

		);  });

		$("#zmienZawartosc4").mouseover(function() {

			$("#bottom").html(

			"<ul><li><a href=#kategoria1>4Kategoria1</a></li><li><a href=#kategoria2>4Kategoria2</a></li><li><a href=#kategoria3>4Kategoria3</a></li><li><a href=#kategoria4>4Kategoria4</a></li></ul>"

		);  });

		$("#zmienZawartosc5").mouseover(function() {

			$("#bottom").html(

			"<ul><li><a href=#kategoria1>5Kategoria1</a></li><li><a href=#kategoria3>5Kategoria3</a></li><li><a href=#kategoria4>5Kategoria4</a></li></ul>"

		);  });

    });

    //]]>

    </script>

  </head>

  <body>

    <div id="top">

      <a href="#link1" id="zmienZawartosc1" name="zmienZawartosc1">Link1</a>

	  <a href="#link2" id="zmienZawartosc2" name="zmienZawartosc2">Link2</a>

	  <a href="#link3" id="zmienZawartosc3" name="zmienZawartosc3">Link3</a> 

	  <a href="#link4" id="zmienZawartosc4" name="zmienZawartosc4">Link4</a>

      <a href="#link5" id="zmienZawartosc5" name="zmienZawartosc5">Link4</a>

    </div>

    <div id="bottom">

      Kategorie

	  

    </div>

  </body>

</html>


Pewnie można to napisać bardziej elegancko - sugestie mile widziane :)
Link do wypowiedziLink

konto usunięte

Temat: Menu js

no dokladnie o to :) wielkie dzieki. To jest jquery tak?
Link do wypowiedziLink

konto usunięte

Temat: Menu js

Piotr Burant:
menu ma jedna belke główna załóżmy ze jest w div id="top" oraz belke pomocnicza np div id="bottom". W belce pomocniczej maja się wyświetlać np. kategorie artykułów gdy najedziemy na artykuły. Z css, xhtml i php aby pobrac te kategotie nie bedzie problemu. Nie wiem poprostu jak za pomocą js zmienic zawartosc #bottom po najechaniu na linka z #top. Zawartosc #bottom ma sie zmienic dopiero wtedy gdy najedziemy na inny link z #top

no dokladnie zwykly onmouseover.. mozna to zrobic w js, mozna w jquery..

<a href="menu_top_1" onmouseover="func();">link</a>

function func() {
$("#bottom").load("./menu_link_1.php"); // przykład
}
Link do wypowiedziLink

konto usunięte

Temat: Menu js

Kuba Świegot:
Piotr Burant:
menu ma jedna belke główna załóżmy ze jest w div id="top" oraz belke pomocnicza np div id="bottom". W belce pomocniczej maja się wyświetlać np. kategorie artykułów gdy najedziemy na artykuły. Z css, xhtml i php aby pobrac te kategotie nie bedzie problemu. Nie wiem poprostu jak za pomocą js zmienic zawartosc #bottom po najechaniu na linka z #top. Zawartosc #bottom ma sie zmienic dopiero wtedy gdy najedziemy na inny link z #top

no dokladnie zwykly onmouseover.. mozna to zrobic w js, mozna w jquery..

<a href="menu_top_1" onmouseover="func();">link</a>

function func() {
$("#bottom").load("./menu_link_1.php"); // przykład
}

to jest wersja "obtrusive"...
wersja "unobrusive":
<a class="link1" href="menu_top_1">link</a>

$('a.link1').mouseover(function(){
$("#bottom").load("./menu_link_1.php");
});

edit: a najlepiej to jak całe menu jest od razu w kodzie razem z submenu i tylko na mouseover przełączać submenu za pomocą toggle() lub show()/hide()...Piotr Lewandowski edytował(a) ten post dnia 26.01.10 o godzinie 20:26
Link do wypowiedziLink

konto usunięte

Temat: Menu js

Dzięki wszystkim za odpowiedzi, pomyślę nad wypowiedzią Piotra, z tego co kiedys czytalem to w jquery to nie jest zbyt trudne.
Link do wypowiedziLink

konto usunięte

Temat: Menu js

Piotr Burant:
Dzięki wszystkim za odpowiedzi, pomyślę nad wypowiedzią Piotra, z tego co kiedys czytalem to w jquery to nie jest zbyt trudne.

Zdaje się, że da się to zrobić nawet przy użyciu SAMEGO (ale musiałbyś pogrzebać w sieci) CSS (ewentualnie z drobną pomocą JS/jQuery)...Piotr Lewandowski edytował(a) ten post dnia 27.01.10 o godzinie 10:47
Link do wypowiedziLink

konto usunięte

Temat: Menu js

Piotr Burant:
menu ma jedna belke główna załóżmy ze jest w div id="top" oraz belke pomocnicza np div id="bottom".

Z wykorzystaniem samego CSS mogłoby to wyglądać tak:

CSS


.menu{ ;float:left; }



.menu a{display: block; height: 40px; }



.menu a:hover{ display: block;

background: red; }



.menu ul{display:none;position:relative;background-color:#e6e6e6;color:black;list-style:none;margin:0.1em 0 0 0;padding:0}



.menu ul li{display:block;padding:0.2em; float: left;}



div.menu:hover ul{

display:block;margin:0;padding:0;

position:absolute;

left:0px;

top: 40px;

width: 100%;

height: 30px;

}



div.menu ul li:hover{

 background: red;

}


HTML



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"

    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">

  <head>

 

    <title>

 

    </title>

    <link media="screen, projection" type="text/css" href="css.css" rel=

    "stylesheet" />

  </head>

  <body>

    <div id="top">

      <div  class="menu">

       <a a href="#">Link 1</a> 

        <ul>

          <li>1Kategoria 1

          </li>

          <li>1Kategoria 2

          </li>

          <li>1Kategoria 3

          </li>

        </ul>

      </div>

      <div  class="menu">

        <a a href="#">Link 2</a> 

        <ul>

          <li>2Kategoria 1

          </li>

          <li>2Kategoria 2

          </li>

          <li>2Kategoria 3

          </li>

        </ul>

      </div>

      <div  class="menu">

        <a a href="#">Link 3</a> 

        <ul>

          <li>3Kategoria 1

          </li>

          <li>3Kategoria 2

          </li>

          <li>3Kategoria 3

          </li>

        </ul>

      </div>

    </div>

  </body>

</html>
Wiktor Osiecki edytował(a) ten post dnia 27.01.10 o godzinie 15:56
Link do wypowiedziLink
Bartosz Ratajczyk

Bartosz Ratajczyk MS SQL Developer

Temat: Menu js

Wiktor Osiecki:
Z wykorzystaniem samego CSS mogłoby to wyglądać tak:

Czy w nowszych wersjach IE poprawnie działa :hover na elementach innych niż "a"?
Link do wypowiedziLink

konto usunięte

Temat: Menu js

W IE7 powyższe rozwiązanie działa, nie wiem jak IE8
Link do wypowiedziLink

konto usunięte

Temat: Menu js

może takie coś Ci się przyda:
http://www.stunicholls.com/menu/pro_dropline_5.html

i więcej tego tutaj:
http://www.instantshift.com/2010/01/25/30-useful-tutor...
Link do wypowiedziLink
Marcin S.

Marcin S. Rails Architect

Temat: Menu js

Pamiętaj, żeby wszystkie elementy w menu zbierać za pomocą jednego selektora nadrzędnego, tj.


jQuery('#menu > a').each(function() {

  $(this).hover(

    function() {

      $(this).addClass("hover");

    },

    function() {

      $(this).removeClass("hover");

    }

  );

});


Dzięki temu po najechaniu na każdy element A w kontenerze o ID="menu", będzie dodawana klasa "hover", analogicznie po zjechaniu będzie odejmowana.

Dokumentacja hover z przykładami.

Odnośnie czystych menu w samym CSS.Marcin Seroczyński edytował(a) ten post dnia 03.02.10 o godzinie 08:58
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

zmiena class aktywnego menu




Wyślij zaproszenie do
Anuluj