html - Facebook dropdown menu - Udvikleren.dk - Programmering, webdesign og grafik

Tags: html css

<< < 1 2 > >>

Bruger #16662 @ 28.08.11 14:30

Heej alle

Jeg har et spørgsmål hvordan man får lavet en klik ned menu.
I kan se det her!

11 svar postet i denne tråd vises herunder
5 indlæg har modtaget i alt 8 karma

Sorter efter stemmer Sorter efter dato

Bruger #4265 @ 28.08.11 15:12

124

Jeg har lavet et helt basalt eksempel på hvordan du kan gøre det. Der er nogle ting som selvfølgelig skulle laves yderligere, men det viser princippet i det.

Pointen er du har et element omkring som har position:relative;, når elementer inde i det får position:absolute;, vil de kun blive placeret inde for det elements (med den relative position) område. Du kan selvfølgelig godt flytte objekter ud over grænsen elementet (som jeg gjorde med "menu").

Og så brugte jeg jQuery til at vise menuen. Magtede ikke lige at skrive det i ren javascript.

HTML kode

 <html>
 <head>
 <style type="text/css">
 div.area {
   position: relative;
 }
 div.button {
   border: solid 1px grey;
   width: 50px;
 }
 div.menu {
   position: absolute;
   top: 20px;
   border: solid 1px black;
   width: 100px;
   display: none;
 }
 </style>
 
 <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
 </head>
 
 <body>
 
 <div class="area">
   <div class="button">Knap</div>
   <div class="menu">Blah1<br />Blah2<br />Blah3<br />Blah4</div>
 </div>
 
 <script type="text/javascript">
   $(document).ready(function() {
     $(".button").mouseover(function() {
       $(".menu").show();
     }).mouseout(function() {
       $(".menu").hide();
     });
   });
 </script>
 </body>
 </html>

Indlæg senest redigeret d. 28.08.2011 15:15 af Bruger #4265

Bruger #4265 @ 28.08.11 16:03

124

En nem måde ville være sådan her. Det var lige den hurtigste løsning jeg kunne komme med

HTML kode

 <html>
  <head>
  <style type="text/css">
   ul li ul { display: none; }
  </style>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js" type="text/javascript"></script>
  </head>
  
  <body>
  
  <div class='menu_left'>
      <ul id="nav">
          <li><a href="index.php">Home</a></li>
          <li><a href="forum.php">Forum</a></li>
          <li><a href="ban_list.php">Ban list</a></li>
          <li><a href="members.php">Members</a></li>
          <li><a href="donate.php">Donate</a></li>
          <li><a href="download.php">Download</a></li>
          <li><a href="ventrilo://64.74.102.2:11658/servername=Darkland">Ventrilo</a></li>
          <li><a href="#search">Search</a>
              <ul id="search">
                  <form method="get" action='search.php'>
                      <li>&nbsp;</li>
                      <li><label for="search">Søgeord:</label></li>
                      <li><input type="text" name="search"/></li>
                      <li><input type="submit" name="submit" value="Search!" /></li>
                      <li>&nbsp;</li>
                  </form>
              </ul>
          </li>
      </ul>
  </div>
  
  <script type="text/javascript">
    $(document).ready(function() {
      $("ul#nav li a").click(function(e) {
        var val = $(this).attr("href");
        if(val.substring(0, 1) == "#") {
          e.preventDefault();
          $(val).toggle();
        }
      });
    });
  </script>
  </body>
  </html>

Bruger #4265 @ 28.08.11 15:17

124

Det kan du sagtens, det er næsten lige så nemt.

Så retter du bare javascriptet til:

JScript kode

 <script type="text/javascript">
    $(document).ready(function() {
      $(".button").click(function() {
        $(".menu").toggle();
      })
    });
 </script>

Bruger #4265 @ 28.08.11 15:20

124

Det kan du nok godt. Men jeg ville holde mig til at gøre det med javascript, da nogle browsere (*HOST* Internet Explorer *HOST*) ikke er helt god til at forstå sådan nogle "nye" ting i CSS.

Bruger #4265 @ 28.08.11 15:38

124

Altså, javascripten skal jo bare være der et sted, og så giver du det navn den har, lidt lige som i mit første eksempel.

Der er en måde kun med CSS, men ved ikke hvor smart det er at gøre når ikke engang Internet Explorer 8 kan følge med på CSS 3 standarden.

Men du kan kigge på http://lab.simurai.com/css/toggle/ der kan det lade sig gøre, så må du lige nærstudere det CSS kode som han/hun linker til.

Bruger #16662 @ 28.08.11 15:15

Tak for eksemplet, men det var ikke helt det jeg mente.

Det jeg mente var når man fx trykker på knappen, så popper der en menu frem, og bliver fremme indtil man trykker på den igen.

Jeg troede man kunne gøre det med noget, ligesom når man bare holder over (hover).

Kan man gøre noget på samme måde?

Bruger #16662 @ 28.08.11 15:18

Tak, men kan man lave det i css? eller er det umuligt?

Indlæg senest redigeret d. 28.08.2011 15:19 af Bruger #16662

Bruger #16662 @ 28.08.11 15:24

Jaah okaay. Men det er fordi jeg har lavet hele min menu linie i css og kan ikke se hvordan jeg skal smide javascript koden ind.

Troede nemlig der var en ligesom man kan skrive:

CSS kode

 a:hover {
     color: #000000;
 }

Bruger #16662 @ 28.08.11 15:51

Kan du få den ind her?

HTML kode

 <div class='menu_left'>
     <ul id="nav">
         <li><a href="index.php">Home</a></li>
         <li><a href="forum.php">Forum</a></li>
         <li><a href="ban_list.php">Ban list</a></li>
         <li><a href="members.php">Members</a></li>
         <li><a href="donate.php">Donate</a></li>
         <li><a href="download.php">Download</a></li>
         <li><a href="ventrilo://64.74.102.2:11658/servername=Darkland">Ventrilo</a></li>
         <li><a href="#search">Search</a>
             <ul>
                 <form method="get" action='search.php'>
                     <li>&nbsp;</li>
                     <li><label for="search">Søgeord:</label></li>
                     <li><input type="text" name="search"/></li>
                     <li><input type="submit" name="submit" value="Search!" /></li>
                     <li>&nbsp;</li>
                 </form>
             </ul>
         </li>
     </ul>
 </div>

Bruger #16662 @ 28.08.11 17:12

Mange tak for dette

Det hjalp rigtig meget

<< < 1 2 > >>

Facebook dropdown menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler