Avatar billede b_ Nybegynder
11. december 2005 - 14:56 Der er 6 kommentarer og
1 løsning

dropmenu vertikal i stedet for horizontal

Har en menu som er horizotal, og vil have at den skal være vertikal. Kan få hovedmenuen vertikal, men kan ikke rette i nedenstående javascript så undermenuerne (dropdown) passer til en vertikal menu. Som I kan se har undermenuerne en fast top.

aktiv = '';

document.onmouseover=mouseOver;

function mouseOver() {
    element = window.event.srcElement;
    id = element.id;

    if (id.indexOf('top_') == 0) {
       
        menunavn = 'menu_' + id.substring(4);
        menu = document.getElementById(menunavn);

if (aktiv != '') {
    aktiv_menu = document.getElementById(aktiv);
    aktiv_menu.style.visibility = 'hidden';
}

aktiv = menunavn;

    menu.style.top = 20;
    top_menu = document.getElementById(id);
    menu.style.pixelLeft = top_menu.offsetLeft;
   
    menu.style.visibility = 'visible';
}

if (id == 'body') {
    if (aktiv != '') {
        aktiv_menu = document.getElementById(aktiv);
        aktiv_menu.style.visibility = 'hidden';
    }
  }
}
Avatar billede b_ Nybegynder
11. december 2005 - 16:16 #1
INGEN BUD?
Avatar billede johan.o Nybegynder
11. december 2005 - 16:55 #2
Puhh, det bliver et skud :)

Hvis jeg forstår dig korrekt så har du en menu med nogle hovedpunkter der står ovenpå hinnanden (verticalt) disse vil du så gerne have til at aktiverer undermenuer som kommer frem til højre for disse hovedpunkter. Problemet er så at alle undermenuerne starter i toppen men du vil gerne have undermenu 3 til at placerer sig ud for hovedmenu punkt 3.

Der er umiddelbart to muligheder :

1.: Du tager den lodrete placering ud af scriptet og laver den i html delen istedet. Det er ikke særligt dynamisk, bl.a. kræver det at du sætter fast linje højde og skrifttype.

2.: Du bruger en funktionalitet der ligner den du bruger til at placerer undermenuen til højre, atså du placerer i forhold til top_menu.offsetTop MEN det kræver at din top_menu er opbygget med f.eks. <div>. Derfor vil det være en hjælp hvis du viser hvordan din html menu ser ud.

Mvh. Johan
Avatar billede b_ Nybegynder
11. december 2005 - 17:13 #3
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
    <title>Menu</title>
    <script type="text/javascript" src="menu.js"></script>
   
    <style type="text/css">
    .menulinie {
    background: #AAAAAA;
    color: white;
    width: 100px;}
    .menu {
    background: #AAAAAA;
    border: solid outset #AAAAAA 2px;
    visibility: hidden;
    position: absolute;}
    .menu a {
    color: white;
    text-decoration: none;}
    .menu a:hover {
    color: red !important;}
   
    </style>
</head>

<body id="body">

<div class="menulinie">
<span id="top_nyheder">Nyheder</span><br />
<span id="top_underholdning">Underholdning</span><br />
<span id="top_sogning">Søgning</span><br />
</div>

<p>
<div id="menu_nyheder" class="menu">
<a href="http://www.test.dk">test1</a><br />
<a href="http://www.test.dk">test2</a><br />
<a href="http://www.test.dk">test3</a><br />
</div>
<div id="menu_underholdning" class="menu">
<a href="http://www.test.dk">test 1</a><br />
<a href="http://www.test.dk">test 2</a><br />
<a href="http://www.test.dk">test 3</a><br />
</div>
<div id="menu_sogning" class="menu">
<a href="http://www.test.dk">test 1</a><br />
<a href="http://www.test.dk">test 2</a><br />
<a href="http://www.test.dk">test 3</a><br />
</div>

</p>


</body>
Avatar billede johan.o Nybegynder
11. december 2005 - 20:38 #4
Uops, jeg faldt lige i søvn på sofaen :).....hvor var det lige vi kom fra he he....

Jeg har lavet disse små ændringer til dit html/script :

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-15" />
<title>Menu</title>
<script type="text/javascript" src="menu.js"></script>
<style type="text/css">

.menulinie {
background: #AAAAAA;
color: white;
width: 100px; }

.menu {
background: #AAAAAA;
border: solid outset #AAAAAA 2px;
visibility: hidden;
position: absolute; }

.menu a {
color: white;
text-decoration: none; }

.menu a:hover {
color: red !important; }
 
</style>
</head>

<body id="body">

<div id="menuCon" style="position: relative; cursor: pointer;">
<div class="menulinie">
  <span id="top_nyheder">Nyheder</span><br />
  <span id="top_underholdning">Underholdning</span><br />
  <span id="top_sogning">Søgning</span><br />
</div>

<div id="menu_nyheder" class="menu">
  <a href="http://www.test.dk">test1</a><br />
  <a href="http://www.test.dk">test2</a><br />
  <a href="http://www.test.dk">test3</a><br />
</div>
<div id="menu_underholdning" class="menu">
  <a href="http://www.test.dk">test 1</a><br />
  <a href="http://www.test.dk">test 2</a><br />
  <a href="http://www.test.dk">test 3</a><br />
</div>
<div id="menu_sogning" class="menu">
  <a href="http://www.test.dk">test-1</a><br />
  <a href="http://www.test.dk">test-2</a><br />
  <a href="http://www.test.dk">test-3</a><br />
</div>
</div>

</body>
</html>

menu.js -->

aktiv = '';

document.onmouseover=mouseOver;

function mouseOver() {
element = window.event.srcElement;
id = element.id;

if (id.indexOf('top_') == 0) {
  menunavn = 'menu_' + id.substring(4);
  menu = document.getElementById(menunavn);

  if (aktiv != '') {
  aktiv_menu = document.getElementById(aktiv);
  aktiv_menu.style.visibility = 'hidden'; }

  aktiv = menunavn;

  menu.style.top = element.offsetTop;
  top_menu = document.getElementById(id);
  menu.style.left = 100;
  menu.style.visibility = 'visible'; }

if (id == 'body') {
  if (aktiv != '') {
  aktiv_menu = document.getElementById(aktiv);
  aktiv_menu.style.visibility = 'hidden'; } }
}

Der er mange ting der kan optimeres men lad mig høre om det var det du efterlyste ?

Mvh. Johan
Avatar billede b_ Nybegynder
12. december 2005 - 11:08 #5
Smid et svar johan - nu har jeg noget at arbejde videre med. Der er lang vej igen. Ligenu virker den kun i IE, og det holder jo ikke.
Avatar billede b_ Nybegynder
12. december 2005 - 11:27 #6
Du kan også nøjes med at ændre det her:

menu.style.left = 100;
top_menu = document.getElementById(id);
menu.style.pixelTop = top_menu.offsetTop;
Avatar billede johan.o Nybegynder
12. december 2005 - 14:32 #7
Jeg ligger et svar :) - Hvis du ender i en blindgyde så spørger du bare igen :)

Mvh. Johan
Avatar billede Ny bruger Nybegynder

Din løsning...

Tilladte BB-code-tags: [b]fed[/b] [i]kursiv[/i] [u]understreget[/u] Web- og emailadresser omdannes automatisk til links. Der sættes "nofollow" på alle links.

Loading billede Opret Preview
Kategori
Vi tilbyder markedets bedste kurser inden for webudvikling

Log ind eller opret profil

Hov!

For at kunne deltage på Computerworld Eksperten skal du være logget ind.

Det er heldigvis nemt at oprette en bruger: Det tager to minutter og du kan vælge at bruge enten e-mail, Facebook eller Google som login.

Du kan også logge ind via nedenstående tjenester