Gå til innhold

[Løst] Drop down meny hjelp

Mazå

Anbefalte innlegg

Mazå

Mazå

Skrevet
Skrevet

Det jeg skal ha inn er en drop down meny, når jeg setter den inn under nav så blir det bare kluss. Noen som kunne fortalt meg hvor jeg skal sette den inn? nedenfor ser du html og css fil. og en egen css og html for drop down menyen som skal inn. Menyen skal se ut som denne her: http://www.handy-htm...n-menu-updated/

Ble litt lang post men håper dere forstår an.

 

HTML:

<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<title>Basic 89</title>
<meta charset="iso-8859-1">
<link rel="stylesheet" href="styles/layout.css" type="text/css">
<!--[if lt IE 9]><script src="scripts/html5shiv.js"></script><![endif]-->
</head>
<body>
<div class="wrapper row1">
 <header id="header" class="clear">
<hgroup>
  <h1><a href="#">HTML5</a></h1>
  <h2>HTML5 Website Template</h2>
</hgroup>
<nav>
  <ul>
	<li><a href="#">Text Link</a></li>
	<li><a href="#">Text Link</a></li>
	<li><a href="#">Text Link</a></li>
	<li><a href="#">Text Link</a></li>
	<li class="last"><a href="#">Text Link</a></li>
  </ul>
</nav>
 </header>
</div>
<!-- content -->
<div class="wrapper row2">
 <div id="container" class="clear">
<!-- Slider -->
<section id="slider"><a href="#"><img src="images/demo/960x360.gif" alt=""></a></section>
<!-- main content -->
<div id="homepage">
  <!-- services area -->
  <section id="services" class="clear">
	<article class="one_quarter">
	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
	  <strong>Lorum ipsum dolor</strong>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
	  <p class="more"><a href="#">Read More »</a></p>
	</article>
	<article class="one_quarter">
	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
	  <strong>Lorum ipsum dolor</strong>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
	  <p class="more"><a href="#">Read More »</a></p>
	</article>
	<article class="one_quarter">
	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
	  <strong>Lorum ipsum dolor</strong>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
	  <p class="more"><a href="#">Read More »</a></p>
	</article>
	<article class="one_quarter lastbox">
	  <figure><img src="images/demo/32x32.gif" width="32" height="32" alt=""></figure>
	  <strong>Lorum ipsum dolor</strong>
	  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc non diam erat. In fringilla massa ut nisi ullamcorper.</p>
	  <p class="more"><a href="#">Read More »</a></p>
	</article>
  </section>
  <!-- / services area -->
  <!-- ########################################################################################## -->
  <!-- ########################################################################################## -->
  <!-- ########################################################################################## -->
  <!-- ########################################################################################## -->
  <!-- / latest work -->
  <section id="latest">
	<article>
	  <figure>
		<ul class="clear">
		  <li class="one_third"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
		  <li class="one_third"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
		  <li class="one_third lastbox"><img src="images/demo/290x180.gif" width="290" height="180" alt=""></li>
		</ul>
		<figcaption><a href="#">View All Our Recent Work Here »</a></figcaption>
	  </figure>
	</article>
  </section>
  <!-- / latest work -->
</div>
<!-- main content -->
<div id="content">
  <section id="posts" class="last clear">
	<ul>
	  <li>
		<article class="clear">
		  <figure><img src="images/demo/180x150.gif" alt="">
			<figcaption>
			  <h2>Indonectetus facilis leo nibh</h2>
			  <p>This is a W3C compliant free website template from <a href="http://www.os-templates.com/" title="Free Website Templates">OS Templates</a>. For full terms of use of this template please read our <a href="http://www.os-templates.com/template-terms">website template licence</a>.</p>
			  <footer class="more"><a href="#">Read More »</a></footer>
			</figcaption>
		  </figure>
		</article>
	  </li>
	  <li class="last">
		<article class="clear">
		  <figure><img src="images/demo/180x150.gif" alt="">
			<figcaption>
			  <h2>Indonectetus facilis leo nibh</h2>
			  <p>You can use and modify the template for both personal and commercial use. You must keep all copyright information and credit links in the template and associated files. For more HTML5 templates visit <a href="http://www.os-templates.com/">free website templates</a>.</p>
			  <footer class="more"><a href="#">Read More »</a></footer>
			</figcaption>
		  </figure>
		</article>
	  </li>
	</ul>
  </section>
</div>
<!-- right column -->
<aside id="right_column">
  <h2 class="title">Categories</h2>
  <nav>
	<ul>
	  <li><a href="#">Free Website Templates</a></li>
	  <li><a href="#">Free CSS Templates</a></li>
	  <li><a href="#">Free XHTML Templates</a></li>
	  <li><a href="#">Free Web Templates</a></li>
	  <li><a href="#">Free Website Layouts</a></li>
	  <li><a href="#">Free HTML 5 Templates</a></li>
	  <li><a href="#">Free Webdesign Templates</a></li>
	  <li><a href="#">Free FireWorks Templates</a></li>
	  <li><a href="#">Free PNG Templates</a></li>
	  <li class="last"><a href="#">Free Website Themes</a></li>
	</ul>
  </nav>
  <!-- /nav -->
</aside>
<!-- / content body -->
 </div>
</div>
<!-- Footer -->
<div class="wrapper row3">
 <footer id="footer" class="clear">
<p class="fl_left">Copyright © 2012 - All Rights Reserved - <a href="#">Domain Name</a></p>
<p class="fl_right">A HTML<a href="http://www.os-templates.com/" title="Free Website Templates">5 Templates</a></p>
 </footer>
</div>
</body>
</html>

 

CSS:

/*
HTML 5 Template
File: Layout CSS
*/
html{overflow-y:scroll;} /* Forces a scrollbar when the viewport is larger than the websites content - CSS3 */
body{margin:0; padding:0; font-size:13px; font-family:Georgia, "Times New Roman", Times, serif; color:#919191; background-color:#232323;}
.clear:after{content:"."; display:block; height:0; clear:both; visibility:hidden; line-height:0;}
.clear{display:block; clear:both;}
html[xmlns] .clear{display:block;}
* html .clear{height:1%;}
a{outline:none; text-decoration:none;}
code{font-weight:normal; font-style:normal; font-family:Georgia, "Times New Roman", Times, serif;}
.fl_left{float:left;}
.fl_right{float:right;}
img{margin:0; padding:0; border:none; line-height:normal; vertical-align:middle;}
.imgholder, .imgl, .imgr{padding:4px; border:1px solid #D6D6D6; text-align:center;}
.imgl{float:left; margin:0 15px 15px 0; clear:left;}
.imgr{float:right; margin:0 0 15px 15px; clear:right;}
/*----------------------------------------------HTML 5 Overrides-------------------------------------*/
address, article, aside, figcaption, figure, footer, header, hgroup, nav, section{display:block; margin:0; padding:0;}
q{display:block; padding:0 10px 8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
q:before{content:'“ '; font-size:26px;}
q:after{content:' „'; font-size:26px; line-height:0;}
/* ----------------------------------------------Wrapper-------------------------------------*/
div.wrapper{display:block; width:100%; margin:0; padding:0; text-align:left;}
.row1, .row1 a{color:#C0BAB6; background-color:#333333;}
.row2{color:#979797; background-color:#FFFFFF;}
.row2 a{color:#FF9900; background-color:#FFFFFF;}
.row3, .row3 a{color:#919191; background-color:#232323;}
/*----------------------------------------------Generalise-------------------------------------*/
#header, #container, #footer{display:block; width:960px; margin:0 auto;}
nav ul{margin:0; padding:0; list-style:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0; font-size:16px; font-weight:bold; font-style:normal; line-height:normal; text-transform:uppercase;}
address{font-style:normal;}
blockquote, q{display:block; padding:8px 10px; color:#979797; background-color:#ECECEC; font-style:italic; line-height:normal;}
blockquote:before, q:before{content:'“ '; font-size:26px;}
blockquote:after, q:after{content:' „'; font-size:26px; line-height:0;}
form, fieldset, legend{margin:0; padding:0; border:none;}
legend{display:none;}
input, textarea, select{font-size:12px; font-family:Georgia,"Times New Roman",Times,serif;}
.one_quarter, .two_quarter, .three_quarter, .four_quarter{display:block; float:left; margin:0 20px 0 0;}
.one_quarter{width:225px;}
.two_quarter{width:470px;}
.three_quarter{width:715px;}
.four_quarter{width:960px; float:none; margin-right:0; clear:both;}
.one_third, .two_third, .three_third{display:block; float:left; margin:0 30px 0 0;}
.one_third{width:300px;}
.two_third{width:630px;}
.three_third{width:960px; float:none; margin-right:0; clear:both;}
.lastbox{margin-right:0;}
/*----------------------------------------------Header-------------------------------------*/
#header{padding:20px 0;}
#header hgroup{float:left; margin:0 0 20px 0;}
#header hgroup h1, #header hgroup h2{font-weight:normal; text-transform:none;}
#header hgroup h1{font-size:36px;}
#header hgroup h2{font-size:13px;}
#header nav{display:block; float:right; margin:10px 0 0 0; padding:20px 0; color:#C0BAB6; background-color:#232323;}
#header nav ul{padding:0 20px;}
#header nav li{display:inline; margin-right:25px; text-transform:uppercase;}
#header nav li.last{margin-right:0;}
#header nav li a{color:#C0BAB6; background-color:#232323;}
#header nav li a:hover{color:#FF9900; background-color:#232323;}
/*----------------------------------------------Content Area-------------------------------------*/
#container{padding:30px 0;}
#container section{display:block; width:100%; margin:0 0 30px 0; padding:0;}
#container .last{margin:0;}
#container .more{text-align:right;}
/* ------Slider-----*/
#container #slider{margin-bottom:50px;}
/* ------Homepage-----*/
#container #homepage{display:block; width:100%; line-height:1.6em;}
#container #homepage #services{padding:0 0 30px 0; border-bottom:1px solid #DEDEDE;}
#container #homepage #services article{}
#container #homepage #services figure{display:inline; float:left;}
#container #homepage #services strong{float:left; margin:8px 0 0 10px; padding:0; font-size:14px; font-weight:bold; text-transform:uppercase;}
#container #homepage #services p{display:block; margin:0; padding:5px 0 0 0; clear:both; line-height:1.6em;}
#container #homepage #latest{padding:0 0 30px 0; border-bottom:1px solid #DEDEDE;}
#container #homepage #latest article{}
#container #homepage #latest article figure{}
#container #homepage #latest article figure ul{margin:0; padding:0; list-style:none;}
#container #homepage #latest article figure ul li{}
#container #homepage #latest article figure ul li img{padding:4px; border:1px solid #D6D6D6;}
#container #homepage #latest article figure figcaption{display:block; width:100%; margin-top:20px; text-align:right;}
/* ------Main Content-----*/
#container #content{float:left; width:630px; line-height:1.6em;}
#container #content #posts{}
#container #content #posts ul{margin:0; padding:0; list-style:none;}
#container #content #posts ul li{display:block; width:100%; margin-bottom:30px;}
#container #content #posts ul li.last{ margin-bottom:0;}
#container #content #posts ul li article{}
#container #content #posts ul li article figure{}
#container #content #posts ul li article figure img{float:left; width:180px; height:150px; margin:0; padding:4px; border:1px solid #D6D6D6;}
#container #content #posts ul li article figure figcaption{display:block; float:right; width:410px;}
#container #content #posts ul li article figure h2{font-size:14px;}
#container #content #posts ul li article figure footer{}
/* ------Right Column-----*/
#container #right_column{float:right; width:280px;}
#container #right_column h2.title{margin-bottom:15px; padding-bottom:15px; border-bottom:1px solid #DEDEDE;}
#container #right_column nav{display:block; width:100%;}
#container #right_column nav ul{margin:0; padding:0; list-style:none;}
#container #right_column nav li{margin:0 0 3px 0; padding:0;}
#container #right_column nav li.last{margin-bottom:0;}
#container #right_column nav a{display:block; margin:0; padding:5px 10px 5px 20px; color:#666666; background:url("../images/orange_file.gif") no-repeat 10px center #FFFFFF; text-decoration:none; border-bottom:1px dotted #666666;}
#container #right_column nav a:hover{color:#FF9900; background-color:#FFFFFF;}
/*----------------------------------------------Footer-------------------------------------*/
#footer{padding:20px 0;}
#footer p{margin:0; padding:0;}

 

Drop Down meny html:

<ul id="nav" class="drop">
 <li><a href="#">Home</a></li>
 <li>About Us
<ul>
  <li><a href="#">History</a></li>
  <li><a href="#">Clients</a></li>
  <li><a href="#">Testimonials</a></li>
  <li><a href="#">Staff</a>
	<ul>
	  <li><a href="#">George Orsmond</a>
		<ul>
		  <li>Web Design</li>
		  <li>Graphic Design</li>
		  <li>HTML</li>
		  <li>CSS</li>
		</ul>
	  </li>
	  <li><a href="#">Dave Macleod</a></li>
	</ul>
  </li>
  <li><a href="#">FAQs</a></li>
</ul>
 </li>
 <li>Services
<ul>
  <li><a href="#">Web Design</a></li>
  <li><a href="#">Graphic Design</a></li>
  <li><a href="#">Logo Design</a></li>
</ul>
 </li>
 <li>Products
<ul>
  <li class="dir"><a href="#">Templates</a></li>
  <li class="dir"><a href="#">Stock Images</a>
	<ul>
	  <li><a href="#">Category 1</a></li>
	  <li><a href="#">Category 2</a></li>
	  <li><a href="#">Category 3</a></li>
	  <li><a href="#">Category 4</a></li>
	  <li><a href="#">Category 5</a></li>
	</ul>
  </li>
  <li><a href="#">Featured</a></li>
  <li><a href="#">Top Rated</a></li>
  <li><a href="#">Resources</a></li>
</ul>
 </li>
 <li><a href="#">Gallery</a></li>
 <li>Contact Us
<ul>
  <li><a href="#">Contact Form</a></li>
  <li><a href="#">How to get here</a></li>
  <li><a href="#">View the map</a></li>
</ul>
 </li>
</ul>

 

CSS for drop down meny:

<style>
/*---- CROSS BROWSER DROPDOWN MENU ----*/
ul#nav {margin: 0 0 0 200px;}
ul.drop a { display:block; color: #fff; font-family: Verdana; font-size: 14px; text-decoration: none;}
ul.drop, ul.drop li, ul.drop ul { list-style: none; margin: 0; padding: 0; border: 1px solid #fff; background: #555; color: #fff;}
ul.drop { position: relative; z-index: 597; float: left; }
ul.drop li { float: left; line-height: 1.3em; vertical-align: middle; zoom: 1; padding: 5px 10px; }
ul.drop li.hover, ul.drop li:hover { position: relative; z-index: 599; cursor: default; background: #1e7c9a; }
ul.drop ul { visibility: hidden; position: absolute; top: 100%; left: 0; z-index: 598; width: 195px; background: #555; border: 1px solid #fff; }
ul.drop ul li { float: none; }
ul.drop ul ul { top: -2px; left: 100%; }
ul.drop li:hover > ul { visibility: visible }
</style>

Lenke til kommentar

Videoannonse

Videoannonse
Annonse
MikkelRev

MikkelRev

Skrevet
Skrevet

Du gir veldig mye arbeid for de som skal hjelpe deg ved å paste så mye kode. Istedetfor å lime inn tusenvis av linjer med kode og spørre "hvorfor virker ikke dette??!", bør du heller hjelpe oss til å hjelpe deg. Prøv å bryt ned koden mest mulig, og lokaliser feilen nærmest mulig. Eller gi en link hvis siden ligger på nett. Eller sjekk ut http://jsfiddle.net/.

Lenke til kommentar
Gjest Slettet+9871234

Gjest Slettet+9871234

Skrevet
Skrevet (endret)

Si på kildekoden i mine drop down menyer kombinenrt med bileder. Eksempel:

 

http://www.digitalstart.no/

 

Klikk på reiser på verktøylinjen stylet med bilde som også kan styles med CSS. Det er hovedmenyen.

Hold deretter musen over reiser for å se undermenyene.

Der finnes en rekke templates på dette jeg ville brukt i stedet for å finne opp hjulet på nytt. Men det avhenger vel om du legger vekt på innhold eller design. Jeg tipper at der er ferdige løsninger i JavaScript bibilioteker som jQuery, jQueryMobile og det minimalistiske biblioteket XUI.

Endret av Slettet+9871234
Lenke til kommentar
Gjest Slettet+9871234

Gjest Slettet+9871234

Skrevet
Skrevet (endret)

Da antar jeg at det kan gjøres med mye mindre (mer kompakt) kode. Ikke minst for mobile plattformer hvor hver eneste byte overflødig kode teller er det viktig. Særlig er det viktig om koden til et av de tre JavaSkript bibliotekene jeg nevner allerede ligger i serverens minne.

Endret av Slettet+9871234
Lenke til kommentar
Gjest Slettet+9871234

Gjest Slettet+9871234

Skrevet
Skrevet (endret)

Hvem sier at dropdown-menyen til handy-html.com bruker en av de tre javascript-bibliotekene du nevner?

 

Sa jeg det?

 

Hverken nettsiden til trådstarter eller dropdown-menyen på handy-html.com er beregnet for mobil.

 

Var det kun et bibliotek for mobile løsninger jeg nevnte?

Endret av Slettet+9871234
Lenke til kommentar
Gjest Slettet+9871234

Gjest Slettet+9871234

Skrevet
Skrevet

Da får du hjelpe ham med monsterkoden, når det sikkert skal lite til for å gjøre det enklere. Jeg gidder ikke skrive inn søkestrengen(e) for ham i en søkemotor.

Lenke til kommentar
emilkje

emilkje

Skrevet
Skrevet (endret)

Her er en liten jsfiddle jeg har laget for å demonstrere prinsippet: http://jsfiddle.net/B8eua/

 

Jeg sier ikke at denne er cross-browser kompatibel, ei heller klar for produksjon. På tross av dette så tror jeg det er enklere å se hva som faktisk foregår når man stripper vekk attributter som ikke har annen funksjon enn krykker for eldre nettlesere. De viktigste punktene jeg kan peke på er at under li:hover (musepeker-over) gir display:block på dens direkte ul childs. Dette defineres med gapetegnet >. Det er med dette selve "drop-down" funksjonaliteten defineres. Alt annet er utseende / estetikk.

 

Håper dette er til hjelp :)

Endret av emilkje
Lenke til kommentar
Mazå

Mazå

Skrevet
  • Forfatter
Skrevet

Her er en liten jsfiddle jeg har laget for å demonstrere prinsippet: http://jsfiddle.net/B8eua/

 

Jeg sier ikke at denne er cross-browser kompatibel, ei heller klar for produksjon. På tross av dette så tror jeg det er enklere å se hva som faktisk foregår når man stripper vekk attributter som ikke har annen funksjon enn krykker for eldre nettlesere. De viktigste punktene jeg kan peke på er at under li:hover (musepeker-over) gir display:block på dens direkte ul childs. Dette defineres med gapetegnet >. Det er med dette selve "drop-down" funksjonaliteten defineres. Alt annet er utseende / estetikk.

 

Håper dette er til hjelp :)

Takk for hjelpa Emilkje.
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
Gå til emneliste

  • Hvem er aktive   0 medlemmer

    • Ingen innloggede medlemmer aktive
×
×
  • Opprett ny...