18 svar · 1 547 visningar · startad av enrosabanan
Någon som vet var jag kan hitta en bra sådan som jag kan få att fungera..?
Jag vill ha en sådan meny som går ner när man håller med musen över, men man ska även kunna klicka där man håller musen. Alltså ska man inte behöva välja något av alternativen som kommer ner i dropdown menyn om man inte vill utan välja själva "huvudmenyn" direkt.
Jag är inte så bra på att förklara men ni kanske förstår? :)
Kolla SuckerTree
Okej, ska testa det. Tack så mycket :)
Den funkar inte i IE, någon som vet hur man ska få den att fungera?
Den fungerar bra i IE6
Jag har IE7, men grejen är den att det exemplet som finns på den sidan funkar fint men inte när man kopierar in koden på sin egna sida.
Kan du visa en sida där du har implementerat den?
Tyvärr har inte jag någon sida ute jag kan visa...
Använd mina filer här på wF och länka till den då. :)
Jag tror jag fick upp den nu...?
Vore bra med lite hjälp, jag har inte hållt på så länge :)
Den är inte positionerad eller något sådant nu heller eftersom jag har ändrat om den så många gånger för att se vad som är fel.
Du får gärna länka till den också.
Lyft ur scriptet ur css-filen.
Javascriptet? För på beskrivningen låg det så. Ska man göra en .js fil? Hur gör man det?
Det låg nog så, men jag tror du missförstod hur det skulle implementeras. :)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Ann-Sofie Larsson -en spegelbild</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link href="formatering_till_1024x768.css" rel="stylesheet" type="text/css">
<script src="formatering_till_1024x768.js">
</script>
</head>
<body>
<div id="main">
<div class="valkommen_text">
<p>Välkommen till min portfolio!</p>
</div>
<p>Jag heter Ann-Sofie Larsson och jag går första året på John Bauergymnasiet </p>
</div>
<div id="bakom_main"></div>
<div id="bakomspegelbild1"></div>
<div id="bakomspegelbild2"></div>
<div id="spegelbild1"> <img src="img/spegelbild1_1024x768.jpg"> </div>
<div id="spegelbild2"> <img src="img/spegelbild2_1024x768.jpg"> </div>
<div id="sidnamn">
<div class="ann_sofie"> Ann-Sofie Larsson </div>
<div class="en_spegelbild"> -en spegelbild </div>
</div>
<div class="suckertreemenu">
<ul id="treemenu1">
<li><a href="#" style="border-left: 1px solid black">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
<li><a href="#">Sub Item 1.3</a></li>
<li><a href="#">Sub Item 1.4</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</a>
</li>
<li><a href="#">Item 4</a></li>
</ul>
<br style="clear: left;" />
</div>
<p id="iepara">Rest of content here</p>
</body>
css-filen:
body {
background-color: #ffffff;
color: #362B44;
font-size: 15px;
font-family: Arial, Helvetica, sans-serif;
margin-bottom: 25px;
}
#main {
position: absolute; left: 125px; top: 290px;
width: 750px;
height: 330px;
background-color: #ffffff;
border: solid #362B44 3px;
margin-bottom: 25px;
padding: 10px;
z-index: 1;
}
#bakom_main {
position: absolute; left: 100px; top: 255px;
width: 900px;
height: 380px;
}
#spegelbild1 {
position: absolute; left: 155px; top: 45px;
width: 116px;
height: 170px;
border: solid #ffffff 5px;
z-index: 7;
}
#spegelbild2 {
position: absolute; left: 714px; top: 45px;
width: 116px;
height: 170px;
border: #ffffff solid 5px;
z-index: 8;
}
#bakomspegelbild1 {
position: absolute; left: 150px; top: 40px;
width: 136px;
height: 190px;
background-color: #362B44;
z-index: 3;
}
#bakomspegelbild2 {
position: absolute; left: 709px; top: 40px;
width: 136px;
height: 190px;
background-color: #362B44;
z-index: 6;
}
#sidnamn {
position: absolute; left: 300px; top: 90px;
width: 400px;
height: 100px;
background-color: #ffffff;
z-index: 2;
}
.ann_sofie {
font-size: 40px;
text-align: center;
}
.en_spegelbild {
font-size: 20px;
text-align: center;
}
.bild_vid_valkommen {
width: 100px;
height: 200px;
float: left;
}
.valkommen_text {
font-size: 20px;
}
/*Credits: Dynamic Drive CSS Library */
/*URL: http://www.dynamicdrive.com/style/ */
.suckertreemenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}
/*Top level list items*/
.suckertreemenu ul li{
position: relative;
display: inline;
float: left;
background-color: #F3F3F3; /*overall menu background color*/
}
/*Top level menu link items style*/
.suckertreemenu ul li a{
display: block;
width: 90px; /*Width of top level menu link items*/
padding: 1px 8px;
border: 1px solid black;
border-left-width: 0;
text-decoration: none;
color: navy;
}
/*1st sub level menu*/
.suckertreemenu ul li ul{
left: 0;
position: absolute;
top: 1em; /* no need to change, as true value set by script */
display: block;
visibility: hidden;
}
/*Sub level menu list items (undo style from Top level List Items)*/
.suckertreemenu ul li ul li{
display: list-item;
float: none;
}
/*All subsequent sub menu levels offset after 1st level sub menu */
.suckertreemenu ul li ul li ul{
left: 159px; /* no need to change, as true value set by script */
top: 0;
}
/* Sub level menu links style */
.suckertreemenu ul li ul li a{
display: block;
width: 160px; /*width of sub menu levels*/
color: navy;
text-decoration: none;
padding: 1px 5px;
border: 1px solid #ccc;
}
.suckertreemenu ul li a:hover{
background-color: black;
color: white;
}
/*Background image for top level menu list links */
.suckertreemenu .mainfoldericon{
background: #F3F3F3 url(media/arrow-down.gif) no-repeat center right;
}
/*Background image for subsequent level menu list links */
.suckertreemenu .subfoldericon{
background: #F3F3F3 url(media/arrow-right.gif) no-repeat center right;
}
* html p#iepara{ /*For a paragraph (if any) that immediately follows suckertree menu, add 1em top spacing between the two in IE*/
padding-top: 1em;
}
/* Holly Hack for IE \*/
* html .suckertreemenu ul li { float: left; height: 1%; }
* html .suckertreemenu ul li a { height: 1%; }
/* End */
js-filen:
//SuckerTree Horizontal Menu (Sept 14th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["treemenu1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus_horizontal(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
if (ultags[t].parentNode.parentNode.id==menuids[i]){ //if this is a first level submenu
ultags[t].style.top=ultags[t].parentNode.offsetHeight+"px" //dynamically position first level submenus to be height of main menu item
ultags[t].parentNode.getElementsByTagName("a")[0].className="mainfoldericon"
}
else{ //else if this is a sub level menu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfoldericon"
}
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.visibility="visible"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.visibility="hidden"
}
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus_horizontal, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus_horizontal)
Okej, tack :)
Men hur gör jag en js-fil?
Kan jag göra den i t ex anteckningar och bara göra ett filslut med .js?
Ja
Okej, tack :) Snällt av dig och hjälpa mig :)
Om det funkade kan du markera tråden som löst. :)