Forum Mjukvara Programmering och digitalt skapande Tråd

Hjälp med java drop down menu!

1
Skriv svar
Permalänk
Medlem
●

Hjälp med java drop down menu!

Hej!

Jag behöver hjälp med att göra en drop-down menu som glider ner under info och har svart bakgrund. Jag har försökt med denna guide: Simple JavaScript Drop Down Menu with timeout effect v2.0 « Scripts and Tricks « JavaScript DHTML Tutorials men det funkar inge vidare för mig.

Så jag lägger upp en bild och lite html kod samt css kod hoppas någon kan hjälpa mig

Uploaded with ImageShack.us

HTML:

</div>
    <div id="menu">
        <ul id="navlist">
            <li id="active"><a href="#">STARTSIDA</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#">#</a></li>
            <li><a href="#"id="current">INFO</a></li>
            <li></li>
        </ul>
    </div>

CSS:

#menu {
	width:100%;
	text-align:center;
	height:49px;
	background:url(../images/menuBackground.gif) repeat-x left top;
	padding-bottom:30px;
ul#navlist {
	white-space: nowrap;
	height:49px;
	font-size:24px;
	padding:10px 0 0 0;
Visa signatur

Hemsidor: http://www.kobbe92.se http://www.datameckarna.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

Känns onödigt att använda javaSCRIPT för det där.
Jag är inte super på css men jag tror något sånt här borde fungera. Någon får gärna rätta mig om jag har fel 

<ul id="navlist">
    <li class="active">
        <a href="#">STARTSIDA</a>
        <ul class="subnav">
            <li>Stuff</li>
            <li>Stuff1</li>
        </ul>
    </li>
    <li><a href="#">#</a></li>
</ul>
#navlist ul {
	display: none;
}

#navlist li:hover ul, #navlist li:focus ul {
	display: block;
}
Visa signatur

Utvecklare (Technical Director) / Delägare - Björnmamman

Redigera
Citera flera Citera
Permalänk
Medlem
●

Gick inge vidare med det. Får inte upp något som rullar ner.

Visa signatur

Hemsidor: http://www.kobbe92.se http://www.datameckarna.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av kobbe92:

Gick inge vidare med det. Får inte upp något som rullar ner.

Gå till inlägget

http://demo.labs.webbhotell.tv/meny.html
Så, sen är det bara att styla det rätt

Visa signatur

Utvecklare (Technical Director) / Delägare - Björnmamman

Redigera
Citera flera Citera
Permalänk
Medlem
●

tackar för hjälpen tror jag börjar få till det nu!

Visa signatur

Hemsidor: http://www.kobbe92.se http://www.datameckarna.se

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av gameresource:

Känns onödigt att använda javaSCRIPT för det där.
Jag är inte super på css men jag tror något sånt här borde fungera. Någon får gärna rätta mig om jag har fel

Gå till inlägget

Javascript är ett måste om man vill att det ska fungera i IE6.

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Leedow:

Javascript är ett måste om man vill att det ska fungera i IE6.

Gå till inlägget

Enligt HTML 5-standarden kan anchor-element innehålla blockelement... så det borde fungera utan javascript både praktiskt och semantiskt.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Teknocide:

Enligt HTML 5-standarden kan anchor-element innehålla blockelement... så det borde fungera utan javascript både praktiskt och semantiskt.

Gå till inlägget

Hmm... Nu tappade du bort mig.
Menar du att för att få en dropdown-meny att fungera för IE6 så ska man använda HTML 5?

Hur som helst så går det inte att göra en dropdown meny i IE6 utan Javascript. Jag skulle älska om någon kunde motbevisa mig (helst en cascading/multi-level-baserad lösning).

Visa signatur

ηλί, ηλί, λαμά σαβαχθανί!?

Redigera
Citera flera Citera
Permalänk
Medlem ★
●
Skrivet av Leedow:

Hmm... Nu tappade du bort mig.
Menar du att för att få en dropdown-meny att fungera för IE6 så ska man använda HTML 5?

Hur som helst så går det inte att göra en dropdown meny i IE6 utan Javascript. Jag skulle älska om någon kunde motbevisa mig (helst en cascading/multi-level-baserad lösning).

Gå till inlägget 
<!doctype html>
<html>
<head>
	<meta charset="utf-8">
	<title>testsida</title>
	<style>
		#nav a { display:block; }
		#nav ul { display:none; }
		#nav a:hover ul { display:block; }
	</style>
</head>
<body>

<ul id="nav">
	<li><a href="#">Meny 1
		<ul>
			<li>1.1</li>
			<li>1.2</li>
			<li>1.3</li>
		</ul>
	</a></li>
	<li><a href="#">Meny 2
		<ul>
			<li>2.1</li>
			<li>2.2</li>
			<li>2.3</li>
		</ul>
	</a></li>
	<li><a href="#">Meny 3
		<ul>
			<li>3.1</li>
			<li>3.2</li>
			<li>3.3</li>
		</ul>
	</a></li>
</ul>

</body>
</html>

Jag har inte testat detta i IE6 då jag "tyvärr" inte har det tillgängligt, men det baseras runt en hover-effekt på a-element, vilket brukar vara kruxet med IE6.

Visa signatur

Kom-pa-TI-bilitet

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara