Tani hosting

menu rozwijane z zakładkami-podstronami?
mordrag Offline
Użytkownik

Liczba postów: 31
Reputacja: 0
Post: #1
menu rozwijane z zakładkami-podstronami? 01-05-2015 19:46
cześć
mam pytanko czy można wykonać w js menu rozwijane z zakładkami-podstronami?
jakby co to poproszę o kod...
Cytuj
Diabeł Online
Użyszkodnik


Liczba postów: 777
Reputacja: 666
klocek Offline
Administrator

Liczba postów: 3,052
Reputacja: 316
Post: #2
RE: menu rozwijane z zakładkami-podstronami? 01-05-2015 20:25
Poszukaj w google pod hasłem "tree menu". Np. http://www.easyjstree.com/
(Ten post był ostatnio modyfikowany: 01-05-2015 20:27 przez klocek.)
WWW Cytuj
mordrag Offline
Użytkownik

Liczba postów: 31
Reputacja: 0
Post: #3
RE: menu rozwijane z zakładkami-podstronami? 01-05-2015 20:32
Ja poskładałem coś takiego tylko img mi się nie wyswietlają czego tu brakuje?
Kod:
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Moja działka</title>

    <style>
        *{margin:0px; padding:0px;}
        body{background: url(tlo.jpg) no-repeat;width:1010px; height:1200px;background-size: 1010px 1200px;}
      ol {
        list-style-type:none;
        padding:0;
        margin:0;
        font-size:18px;
        height:2em;
        line-height:2em;
        text-align:center;
      }

      ol a {
        display:block;
        text-decoration:none;
        color: black;
        padding:0 5px;
      }

      ol > li {
        float:left;
        width:150px;
        margin-left:1px;
        height:2em;
      }

      ol > li:first-child {
        margin-left:0;
      }

      ol > li:hover {
        background-color:white;;
      }

      ol > li:hover > a {
        color: black;
      }

      ol > li:hover > ul {
        display:block;
      }

      ol > li > ul {
        display:none;
        list-style-type:none;
        padding:0;
        margin:0;
      }

      ol > li > ul > li {
        position:relative;
        background-color:#339933;
      }

      ol > li > ul > li > a {
        border-top:1px solid #339933;
      }

      ol > li > ul > li:hover {
        background-color: white;
      }

      ol > li > ul > li:hover > a {
        color: black;
      }
      
      #logo{background: url(napis.png) no-repeat;width:150px;background-size:1005px 150px;border:0px solid black;width:1005px; height:150px;}
      #menupo{border:0px solid black;width:1005px; height:40px;}
      #stopka{position:relative;top:120px;color:white;background: url(stopka2.png) no-repeat;width:150px;background-size:1005px 80px;border:0px solid black;width:1005px; height:80px;}
      #content{position:relative;top:15px;left:-880px;border:0px solid black;width:1005px; height:800px;}
      #menupo li{line-height:50px; background: url(button1.png) no-repeat;width:150px; height:50px;background-size:150px 50px;]
      #zakladka2{position:relative;top:15px;left:15px;width:1005px; height:600px;}
      
    </style>

  </head>

<body>
<script src="http://code.jquery.com/jquery-1.6.3.min.js"></script>

<script>
$(document).ready(function() {
$("#content div").hide();
$("#menu1 li:first").attr("id","current");
$("#content div:first").fadeIn();
$('#menu1 a').click(function(e) {
e.preventDefault();
$("#content div").hide();
$("#menu1 li").attr("id","");
$(this).parent().attr("id","current");
$('#' + $(this).attr('title')).fadeIn();
});
})();
</script>
<div id="logo"></div>

  <ol id="menupo">
  <li><a href="#">Strona glowna</a>
      <ul id="menu1">
        <li><a href="#" title="zakladka1">strona główna</a></li>
      </ul>
    </li>
     <li><a href="#">Kwiaty</a>
      <ul id="menu1">
        <li><a href="#" title="zakladka2">wiosną</a></li>
        <li><a href="#" title="zakladka3">latem</a></li>
      </ul>
    </li>
     <li><a href="#">Krzewy wysokie</a>
      <ul id="menu1">
        <li><a href="#" title="zakladka4">maliny</a></li>
        <li><a href="#" title="zakladka5">jerzyny</a></li>
      </ul>
    </li>
    <li><a href="#">Krzewy niskie</a>
      <ul id="menu1">
        <li><a href="#" title="zakladka6">truskawki</a></li>
      </ul>
    </li>
    <li><a href="#">Drzewa</a>
      <ul id="menu1">
        <li><a href="#" title="zakladka7">Jabłka</a></li>
        <li><a href="#" title="zakladka8">Śliwki</a></li>
        <li><a href="#" title="zakladka9">Gruszki</a></li>
        <li><a href="#" title="zakladka10">Wiśnie</a></li>
      </ul>
     </li>
     <li><a href="#">Pomidory</a>
      <ul id="menu1">
        <li><a href="#" title="zakladka11">odmiana1</a></li>
        <li><a href="#" title="zakladka12">odmiana2</a></li>
        <li><a href="#" title="zakladka13">odmiana3</a></li>
        <li><a href="#" title="zakladka14">odmiana4</a></li>
      </ul>
     </li>
  </ol>
<div id="content">
<div id="zakladka1">111</div>
<div id="zakladka2">
<table>
<tr>
    <td><img src="o1.jpg" width="230" height="150"></img></td>    <td><img src="o2.jpg" width="230" height="150"></img></td>
</tr>
<tr>
    <td><img src="o3.jpg" width="230" height="150"></img></td>    <td><img src="o4.jpg" width="230" height="150"></img></td>
</tr>
</table>
</div>
<div id="zakladka3">
</div>
<div id="zakladka4">444</div>
<div id="zakladka5">555</div>
<div id="zakladka6">666</div>
<div id="zakladka7">777</div>
<div id="zakladka8">888</div>
<div id="zakladka9">999</div>
<div id="zakladka10">101010</div>
<div id="zakladka11">111111</div>
<div id="zakladka12">121212</div>
<div id="zakladka13">131313</div>
<div id="zakladka14">141414</div>

</div>

<div id="stopka"></div>

</body>
</html>
Cytuj


Skocz do:


Użytkownicy przeglądający ten wątek: 1 gości