html - Roterende billed ved klik/Onclick menu - Udvikleren.dk

Tags: html jquery javascript css

<< < 1 2 > >>

Bruger #16662 @ 02.02.12 15:20

Hej alle

Jeg vil gerne spørge jer om to ting.

Den første:
Hvordan kan jeg lave en drop down menu som ser sådan her ud når man intet har gjort: link

Når man så trykker på den første skal den så komme ud sådan her: link

Den anden:
Den høre sådan set sammen med den første, men hvordan kan man lave sådan at når menuen folder sig ud, at der fx er et icon som drejer med rundt

16 svar postet i denne tråd vises herunder
2 indlæg har modtaget i alt 2 karma

Sorter efter stemmer Sorter efter dato

Bruger #15754 @ 02.02.12 16:35

989

Du skal også bruge
UI Core
UI Widget
UI Effects Core

Du kan hente dem her.

Som du kan se Kenneth også har - <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>

Indlæg senest redigeret d. 02.02.2012 16:36 af Bruger #15754

Bruger #3427 @ 02.02.12 16:36

1.520

jo

http://kenneth.wi.ots.dk/udvikleren/jqa.php

HTML kode

 <!DOCTYPE html>
  <html lang="en">
  <head>
      <meta charset="utf-8">
      <link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/base/jquery-ui.css" type="text/css" media="all" /> 
      <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
      <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.min.js"></script>
      <script type="text/javascript">
        $(function(){
          $('#accordion').accordion();
        });
      </script>
 
  </head>
  <body>
  
 <div id="accordion">
      <h3><a href="#">Section 1</a></h3>
      <div>
          <p>
          Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
          ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
          amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
          odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
          </p>
 
      </div>
      <h3><a href="#">Section 2</a></h3>
      <div>
          <p>
          Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
          purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
          velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
          suscipit faucibus urna.
          </p>
      </div>
      <h3><a href="#">Section 3</a></h3>
 
      <div>
          <p>
          Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
          Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
          ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
          lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
          </p>
          <ul>
              <li>List item one</li>
              <li>List item two</li>
              <li>List item three</li>
 
          </ul>
      </div>
      <h3><a href="#">Section 4</a></h3>
      <div>
          <p>
          Cras dictum. Pellentesque habitant morbi tristique senectus et netus
          et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
          faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
          mauris vel est.
          </p>
          <p>
          Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
          Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
          inceptos himenaeos.
          </p>
 
      </div>
  </div> 
  
  </body>
  </html>

Bruger #15754 @ 02.02.12 15:29

989

Den første effekt hedder accordion

Der får du samtidigt billedet der drejer med

Det hele kan customizes, det kan du læse mere om på deres site.

Indlæg senest redigeret d. 02.02.2012 15:30 af Bruger #15754

Bruger #16662 @ 02.02.12 15:38

Altså der står sådan en View Source, og hvis jeg kopiere det ind derfra, virker det ikke

Nu fandt jeg den her http://jsfiddle.net/janjarfalk/XE9sS/ men når jeg skriver den ind, så vil den ikke virke

Hvorfor vil den ikke det :/

Indlæg senest redigeret d. 02.02.2012 15:51 af Bruger #16662

Bruger #3427 @ 02.02.12 15:59

1.520

har du husket:
<script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
?

Bruger #16662 @ 02.02.12 16:02

Jep, det har jeg husket

Koden ser sådan her ud:

HTML kode

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="utf-8">
     <script type="text/javascript" src="http://code.jquery.com/jquery-1.4.4.min.js"></script>
     <script type="text/javascript">
        $('#accordion').accordion();
     </script>
     <style type="text/css">
     body { background: #0D1114; }
 
     ul { border: 1px solid #eee; border-bottom: 0; }
     li { background: #fff; border-bottom: 1px solid #eee; }
     li li { background: #eee; }
     a { padding: 0 10px; font: bold 13px/30px 'Arial', 'sans-serif'; color: #036; text-decoration: none; }
     div { background: #333; padding: 10px; color: #eee; font: 11px Arial; }
 
     </style>
 </head>
 <body>
 
 <ul id="accordion">
     <li>
         <a href="#america">America</a>
         <ul>
             <li>
                 <a href="#america-newyork">New York</a>
                 <div>Information about New York</div>
             </li>
             <li>
                 <a href="#america-sanfransisco">San Fransisco</a>
                 <div>Information about San Fransisco</div>
             </li>
         </ul>
     </li>
     <li>
         <a href="#antarctica">Antarctica</a>
         <div>Information about Antarctica</div>
     </li>
 </ul>
 
 
 </body>
 </html>

Bruger #3427 @ 02.02.12 16:14

1.520

hm kan ik lige se nogen fejl, måske:

JScript kode

 $(function(){
   $('#accordion').accordion();
 });

Bruger #16662 @ 02.02.12 16:15

Niks, desværre

Bruger #3427 @ 02.02.12 16:20

1.520

på jquerys hjemmeside er det lavet med div og ik ul's

HTML kode

 <div id="accordion">
     <h3><a href="#">Section 1</a></h3>
     <div>
         <p>
         Mauris mauris ante, blandit et, ultrices a, suscipit eget, quam. Integer
         ut neque. Vivamus nisi metus, molestie vel, gravida in, condimentum sit
         amet, nunc. Nam a nibh. Donec suscipit eros. Nam mi. Proin viverra leo ut
         odio. Curabitur malesuada. Vestibulum a velit eu ante scelerisque vulputate.
         </p>
     </div>
     <h3><a href="#">Section 2</a></h3>
     <div>
         <p>
         Sed non urna. Donec et ante. Phasellus eu ligula. Vestibulum sit amet
         purus. Vivamus hendrerit, dolor at aliquet laoreet, mauris turpis porttitor
         velit, faucibus interdum tellus libero ac justo. Vivamus non quam. In
         suscipit faucibus urna.
         </p>
     </div>
     <h3><a href="#">Section 3</a></h3>
     <div>
         <p>
         Nam enim risus, molestie et, porta ac, aliquam ac, risus. Quisque lobortis.
         Phasellus pellentesque purus in massa. Aenean in pede. Phasellus ac libero
         ac tellus pellentesque semper. Sed ac felis. Sed commodo, magna quis
         lacinia ornare, quam ante aliquam nisi, eu iaculis leo purus venenatis dui.
         </p>
         <ul>
             <li>List item one</li>
             <li>List item two</li>
             <li>List item three</li>
         </ul>
     </div>
     <h3><a href="#">Section 4</a></h3>
     <div>
         <p>
         Cras dictum. Pellentesque habitant morbi tristique senectus et netus
         et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in
         faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia
         mauris vel est.
         </p>
         <p>
         Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus.
         Class aptent taciti sociosqu ad litora torquent per conubia nostra, per
         inceptos himenaeos.
         </p>
     </div>
 </div>

Bruger #16662 @ 02.02.12 16:22

Så kommer det bare som tekst, ligesom den anden

<< < 1 2 > >>

Roterende billed ved klik/Onclick menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler