html - Drop down menu - Udvikleren.dk - Programmering, webdesign og grafik

Tags: css html javascript

<< < 1 2 > >>

Bruger #16662 @ 06.12.11 00:52

Hej Udvikleren

Jeg vil gerne have lavet en drop down menu ned fra et af mine links.
Min kode ser sådan herud:

HTML kode

 <table border='0' width='100%'>
     <tr>
         <td align='center'>
             <b><a href='#navn'>Navn</a></b>&nbsp;|&nbsp;
             <a href='#plads'>Fri plads: 1000 MB</a>&nbsp;|&nbsp;
             <a href='#aktive'>Mine aktive fag </a>&nbsp;|&nbsp;
             <a href='#afsluttede_fag'>Mine afsluttede fag</a>&nbsp;|&nbsp;
             <a href='#afsluttede_prover'>Mine afsluttede prøver </a>&nbsp;|&nbsp;
             <a href='#oversigt'>Afleveringsoversigt</a>
         </td>
     </tr>
 </table>

Jeg vil gerne have lavet sådan at når jeg fx trykke på Navn, så kommer der en drop down menu ned med:

HTML kode

 <table border='0' width='100%'>
     <tr>
         <td>
             <a href='index.php?action=1'>1</a><br>
             <a href='index.php?action=2'>2</a><br>
             <a href='index.php?action=3'>3</a><br>
         </td>
     </tr>
 </table>

Og når jeg så trykker på Navn igen, så lukker drop down menu'en ned.

Hvordan kan dette gøres

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

Sorter efter stemmer Sorter efter dato

Bruger #16025 @ 06.12.11 07:55

442

Nu er det længe siden at jeg har arbejdet med jQuery, men noget lign. det her?

JScript kode

 $(document).ready(function() {
     $("a#navn").mouseover(function() {
         $("div#navn").stop().slideToogle(1000);
     });
     
     $("a#navn").mouseout(function() {
         $("div#navn").stop().slideToogle(1000);
     });
 });

Koden er ikke gennemtestet, og jeg har lavet den med mouseover og mouseout. Ellers kan du jo bruge noget i retning af det her:

JScript kode

 function vis(obj) {
     var menupunkt = obj.id;
     var umenupunkt = "umenu" + menupunkt;
     
     document.getElementById(umenupunkt).style.display = "block";
 }
 
 function skjul(obj) {
     var menupunkt = obj.id;
     var umenupunkt = "umenu" + menupunkt;
     
     document.getElementById(umenupunkt).style.display = "none";
 }

HTML kode

 <div id="menu">
 
         <div id="menu1" class="boks">
 
             <a href="menu.html" class="link">Home</a>
 
         </div>
 
         
 
         <div id="menu2" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
 
             <span id="div2" class="link">About</span>
 
             <div id="umenumenu2" class="uboks">
 
                 <a href="menu.html" class="ulink">Biography</a>
 
                 <a href="menu.html" class="ulink">Gallery</a>
 
             </div>
 
         </div>
 
         
 
         <div id="menu3" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
 
             <span id="div3" class="link" class="boks">More</span>
 
             <div id="umenumenu3" class="uboks">
 
                    <a href="menu.html" class="ulink">Support</a>
 
                 <a href="menu.html" class="ulink">Contact</a>
 
             </div>
 
         </div>
 
     </div>

javascript

Bruger #16025 @ 06.12.11 09:29

442

HTML kode

 <!DOCTYPE>
 <html>
 <head>
 <title>test</title>
 <script type="text/javascript">
 function vis(obj) {
      var menupunkt = obj.id;
      var umenupunkt = "umenu" + menupunkt;
      
      document.getElementById(umenupunkt).style.display = "block";
  }
  
  function skjul(obj) {
      var menupunkt = obj.id;
      var umenupunkt = "umenu" + menupunkt;
      
      document.getElementById(umenupunkt).style.display = "none";
  }
 </script>
 </head>
 
 <body>
 <div id="menu">
  
          <div id="menu1" class="boks">
  
              <a href="menu.html" class="link">Home</a>
  
          </div>
  
          
  
          <div id="menu2" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
  
              <span id="div2" class="link">About</span>
  
              <div id="umenumenu2" class="uboks">
  
                  <a href="menu.html" class="ulink">Biography</a>
  
                  <a href="menu.html" class="ulink">Gallery</a>
  
              </div>
  
          </div>
  
          
  
          <div id="menu3" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
  
              <span id="div3" class="link" class="boks">More</span>
  
              <div id="umenumenu3" class="uboks">
  
                     <a href="menu.html" class="ulink">Support</a>
  
                  <a href="menu.html" class="ulink">Contact</a>
  
              </div>
  
          </div>
  
      </div>
 </body>
 </html>

Har du gjort det sådan her?

EDIT! Jeg glemte lige CSS'en:

CSS kode

 #menu {
     position: relative;
 }
 
 a.ulink {
     font-family: Myriad Pro;
     font-size: 14px;
     color: #323232;
     text-decoration: none;
     cursor: default;
 }
 
 .link, a.link {
     font-family: Myriad Pro;
     font-size: 14px;
     color: #323232;
     text-decoration: none;
     cursor: default;
 }
 
 .boks {
     padding: 4px 20px 4px 20px;
     background-color: #F1F1F1;
     border: 1px solid #999999;
     display: inline;
     color: #323232;
     float: left;
     min-width: 10px;
     position: relative;
 }
 
 .boks:hover {
     background-color: #FFFFFF;
 }
 
 .uboks {
     display: none;
     width: 120px;
     position: absolute;
     top: 26px;
     left: -1px;
 }
 
 .uboks .ulink {
     display: block;
     border: 1px solid #999999;
     background-color: #F1F1F1;
     padding: 4px 10px 4px 10px;
 }

Indlæg senest redigeret d. 06.12.2011 09:30 af Bruger #16025

Bruger #16025 @ 06.12.11 12:42

442

HTML kode

 <!DOCTYPE>
 <html>
 <head>
 <title>test</title>
 <script type="text/javascript">
 function vis(obj) {
      var menupunkt = obj.id;
      var umenupunkt = "umenu" + menupunkt;
      
      document.getElementById(umenupunkt).style.display = "block";
  }
  
  function skjul(obj) {
      var menupunkt = obj.id;
      var umenupunkt = "umenu" + menupunkt;
      
      document.getElementById(umenupunkt).style.display = "none";
  }
 </script>
 <style type="text/css">
 #menu {
     position: relative;
 }
 
 a.ulink {
     font-family: Myriad Pro;
     font-size: 14px;
     color: #323232;
     text-decoration: none;
     cursor: default;
 }
 
 .link, a.link {
     font-family: Myriad Pro;
     font-size: 14px;
     color: #323232;
     text-decoration: none;
     cursor: default;
 }
 
 .boks {
     padding: 4px 20px 4px 20px;
     background-color: #F1F1F1;
     border: 1px solid #999999;
     display: inline;
     color: #323232;
     float: left;
     min-width: 10px;
     position: relative;
 }
 
 .boks:hover {
     background-color: #FFFFFF;
 }
 
 .uboks {
     display: none;
     width: 120px;
     position: absolute;
     top: 26px;
     left: -1px;
 }
 
 .uboks .ulink {
     display: block;
     border: 1px solid #999999;
     background-color: #F1F1F1;
     padding: 4px 10px 4px 10px;
 }
 </style>
 </head>
 
 <body>
 <div id="menu">
  
          <div id="menu1" class="boks">
  
              <a href="menu.html" class="link">Home</a>
  
          </div>
  
          
  
          <div id="menu2" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
  
              <span id="div2" class="link">About</span>
  
              <div id="umenumenu2" class="uboks">
  
                  <a href="menu.html" class="ulink">Biography</a>
  
                  <a href="menu.html" class="ulink">Gallery</a>
  
              </div>
  
          </div>
  
          
  
          <div id="menu3" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
  
              <span id="div3" class="link" class="boks">More</span>
  
              <div id="umenumenu3" class="uboks">
  
                     <a href="menu.html" class="ulink">Support</a>
  
                  <a href="menu.html" class="ulink">Contact</a>
  
              </div>
  
          </div>
  
      </div>
 </body>
 </html>

Prøv at gøre sådan.
Den er lavet som mouseover, og ikke at klikke på den

Bruger #16662 @ 06.12.11 08:25

Hej Daniele

Jeg forstår ikke din kode.
Når jeg tager det der i HTML afsnittet. Og tager den anden JScript. Så får jeg bare en masse punkter, og der sker intet.

Hvad er det jeg gør forkert?

Bruger #16662 @ 06.12.11 12:40

Jeg har fået skrevet min op sådan her nu:

Kode

<html>
<head>
	<link rel="stylesheet" type="text/css" href="style.css"/>
	<style type="text/css">
		#menu {
		     position: relative;
		 }

		 a.ulink {
		     font-family: Myriad Pro;
		     font-size: 14px;
		     color: #323232;
		     text-decoration: none;
		     cursor: default;
		 }

		 .link, a.link {
		     font-family: Myriad Pro;
		     font-size: 14px;
		     color: #323232;
		     text-decoration: none;
		     cursor: default;
		 }

		 .boks {
		     padding: 4px 20px 4px 20px;
		     background-color: #F1F1F1;
		     border: 1px solid #999999;
		     display: inline;
		     color: #323232;
		     float: left;
		     min-width: 10px;
		     position: relative;
		 }

		 .boks:hover {
		     background-color: #FFFFFF;
		 }

		 .uboks {
		     display: none;
		     width: 120px;
		     position: absolute;
		     top: 26px;
		     left: -1px;
		 }

		 .uboks .ulink {
		     display: block;
		     border: 1px solid #999999;
		     background-color: #F1F1F1;
		     padding: 4px 10px 4px 10px;
		 }
	</style>
</head>
<body>
<div id="menu">
  	<div id="menu1" class="boks">
 		<a href="menu.html" class="link">Home</a>
 	</div>
 	<div id="menu2" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
 		<span id="div2" class="link">About</span>
  		<div id="umenumenu2" class="uboks">
 			<a href="menu.html" class="ulink">Biography</a>
 			<a href="menu.html" class="ulink">Gallery</a>
 		</div>
	</div>
 	<div id="menu3" class="boks" onmouseover="vis(this)" onmouseout="skjul(this)">
 		<span id="div3" class="link" class="boks">More</span>
 		<div id="umenumenu3" class="uboks">
 			<a href="menu.html" class="ulink">Support</a>
 			<a href="menu.html" class="ulink">Contact</a>
		</div>
	</div>
</div>

<script type='text/javascript">'	
	function vis(obj) {
	     var menupunkt = obj.id;
	     var umenupunkt = "umenu" + menupunkt;

	     document.getElementById(umenupunkt).style.display = "block";
	 }

	 function skjul(obj) {
	     var menupunkt = obj.id;
	     var umenupunkt = "umenu" + menupunkt;

	     document.getElementById(umenupunkt).style.display = "none";
	 }
</script>

Men der kommer ikke noget frem når jeg klikker på de forskellige snakker

Bruger #16662 @ 06.12.11 12:48

Så forsvinder det hele :/

Bruger #16908 @ 06.12.11 12:56

Jeg har lavet det på mine egen hjemmeside: Bjergkongen hvor jeg brugte noget ret simpel jquery.

Dog er det ved hover men det tog kun få linier kode og så var det på plads

JScript kode

 $('.content-menu-item').mouseover(function () {
     $(this).children('.top-sub-menu-ct').show();
 });
 $('.content-menu-item').mouseout(function () {
     $(this).children('.top-sub-menu-ct').hide();
 });

Du selv tilpasse det din egen kode men det ret simpelt

Bruger #16662 @ 06.12.11 13:02

Det er som om den kode du gav mig før, ikke bliver læst, og stopper for resten af koden

Men skal jeg lave noget om i den du har der eller skal jeg bare smide den ind i header?

Bruger #16025 @ 06.12.11 13:04

442

Koden virker fint hos mig o.O

Bruger #16662 @ 06.12.11 13:07

Nu virker det lige pludselig

Mange tak for hjælpen

<< < 1 2 > >>

Drop down menu

Karma barometer (30 dage)

Modtaget

Givet

Favorit hos
Forum tråde
Artikler