Vertical Submenu til v7
|
Tutsi |
Lagt på d. 31-05-2009 21:18
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
Yes that is the same
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
|
Skrevet d. 22-11-2024 20:28
|
Reklame Agent
Antal indlæg: n^x
Tilmeldt: Altid
|
|
IP: localhost |
|
|
mojkan |
Lagt på d. 31-05-2009 21:21
|
Begynder
Antal indlæg: 9
Tilmeldt: 20/04/2009 22:58
|
Hehe, ok - thanks.
I did add lots of text after your reply Is that something you might be able to explain?
EDIT:
I kind of get it. However. If you look on this site and the menu:
"Hvem er Assensvej". This is a clickable link however, all it does is opening a new front page. How do I make a menu-header that is not clickable? Anybody who knows?
/Henrik
Redigeret af mojkan d. 31-05-2009 21:31
|
|
|
|
|
|
Tutsi |
Lagt på d. 31-05-2009 21:31
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
I think assensvej have to do that. He knows a lot about this.
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
mojkan |
Lagt på d. 31-05-2009 22:43
|
Begynder
Antal indlæg: 9
Tilmeldt: 20/04/2009 22:58
|
I actually made it work ok now - I just need to make the font larger. I cannot find font size in code - does it use the font size from style.css?
Great code! I really needed this
EDIT:
Well, hmmm - still wonder.
Product will open up cake and choclat on hover. None of these three should be a link - they should just open up a sub-level. The sub-level, on the other hand, should be a link which you click to go "there".
Is this possible
hehe, I laughing at my own explanation, hope you understand
Redigeret af mojkan d. 31-05-2009 22:49
|
|
|
|
|
|
assensvej |
Lagt på d. 31-05-2009 23:25
|
Superadministrator
Antal indlæg: 1735
Tilmeldt: 15/01/2006 11:36
|
Øvøv now I just hand and made menu for you
but good to succeed you cake and chocolate
If you need to make the text large insert this here <h3>
if (window.addEventListener)
window.addEventListener('load', buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent('onload', buildsubmenus)
</script>
<div class='suckerdiv'>
<ul id='suckertree1'>
<h3>
<li><a href='news.php' target='_blank'><img src='http://www.assensvej.dk/ikon/computer.gif' border='0' alt=''> Products</a>
Redigeret af assensvej d. 31-05-2009 23:36
HUSK at læse reglerne for Brug af Debatten - Spørgsmål i privat beskeder og på msn, besvares ikke uden aftale.
Ekspert.
En ekspert er en, der har begået om ikke alle, så i hvert fald de groveste fejltagelser inden for sit felt
Niels Bohr, atomfysiker, 1865-1962
|
|
|
|
|
|
mojkan |
Lagt på d. 31-05-2009 23:46
|
Begynder
Antal indlæg: 9
Tilmeldt: 20/04/2009 22:58
|
Thanks for your answer. However, if I put the <h3> or <h2> the font gets bigger but the submenu doesn't work anymore
I changed in style.css instead.
However - I use three levels of submenus. The third one is really far away from first level. Is there a way making the third level open downwards instead of opening up to the right?
Or that all of them would open up down instead of to the right
Redigeret af mojkan d. 01-06-2009 00:18
|
|
|
|
|
|
assensvej |
Lagt på d. 01-06-2009 00:27
|
Superadministrator
Antal indlæg: 1735
Tilmeldt: 15/01/2006 11:36
|
However - I use three levels of submenus. The third one is really far away from first level. Is there a way making the third level open downwards instead of opening up to the right?
I do not imagine it can get to go down
but only to the right
HUSK at læse reglerne for Brug af Debatten - Spørgsmål i privat beskeder og på msn, besvares ikke uden aftale.
Ekspert.
En ekspert er en, der har begået om ikke alle, så i hvert fald de groveste fejltagelser inden for sit felt
Niels Bohr, atomfysiker, 1865-1962
|
|
|
|
|
|
Tutsi |
Lagt på d. 01-06-2009 12:04
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
EDIT:
I kind of get it. However. If you look on this site and the menu:
"Hvem er Assensvej". This is a clickable link however, all it does is opening a new front page. How do I make a menu-header that is not clickable? Anybody who knows?
Add target=_'self' in the code.
Kode <a href='news.php' target='_self'>
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
mojkan |
Lagt på d. 01-06-2009 12:39
|
Begynder
Antal indlæg: 9
Tilmeldt: 20/04/2009 22:58
|
Ok, thanks! I will try that - I appreciate your helping me! |
|
|
|
|
|
Ludvig73 |
Lagt på d. 21-10-2009 23:28
|
Begynder
Antal indlæg: 5
Tilmeldt: 21/10/2009 23:18
|
Hej Kenneth,
Hvordan laver jeg 3 submenuer, dvs. en mere end præsenteret i oivenstående ?
Er det muligt at bede teksten om at centrere sig horisontalt således at den ligger sig på midten af billedet ?
Er det muligt at ændre lidt på størrelsen af teksten ? |
|
|
|
|
|
assensvej |
Lagt på d. 21-10-2009 23:50
|
Superadministrator
Antal indlæg: 1735
Tilmeldt: 15/01/2006 11:36
|
Hvis du kan vente lidt til i næste uge vil jeg gerne kigge på den og se om det kan lade sig gøre
HUSK at læse reglerne for Brug af Debatten - Spørgsmål i privat beskeder og på msn, besvares ikke uden aftale.
Ekspert.
En ekspert er en, der har begået om ikke alle, så i hvert fald de groveste fejltagelser inden for sit felt
Niels Bohr, atomfysiker, 1865-1962
|
|
|
|
|
|
Tutsi |
Lagt på d. 22-10-2009 07:51
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
Har du koden til din menu? Hvis du vedhæfter den, er det nemmere at hjælpe
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
Ludvig73 |
Lagt på d. 22-10-2009 23:39
|
Begynder
Antal indlæg: 5
Tilmeldt: 21/10/2009 23:18
|
Hej Ellen,
Som du kan se af vedlagte kode, så har jeg forsøgt at finde en løsning, og i første linje virker det faktisk at jeg har tre niveauer, men så virker den ikke i de følende forsøg.
Kan du se hvad jeg gør galt ?
I øvrigt, ved du om det er det muligt at bede teksten om at centrere sig horisontalt således at den ligger sig på midten af billedet ?
Kode openside("Vertical Submenu");
echo "<style type='text/css'>
/*Credits: Assensvej.dk & Falkenbjerg.dk */
/*URL: http://www.assensvej.dk/ver7 *** http://www.falkenbjerg.dk/ */
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #FBF2E3;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background: #A29B7A;
}
.suckerdiv .subfolderstyle{
background: url(http://www.falkenbjerg.dk/arrow-list.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>
<script type='text/javascript'>
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Falkenbjerg.dk: http://www.falkenbjerg.dk/
var menuids=['suckertree1'] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName('ul')
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName('a')[0].className='subfolderstyle'
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+'px' //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (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.onmouseover=function(){
this.getElementsByTagName('ul')[0].style.display='block'
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName('ul')[0].style.display='none'
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use 'display:none' to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility='visible'
ultags[t].style.display='none'
}
}
}
if (window.addEventListener)
window.addEventListener('load', buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent('onload', buildsubmenus)
</script>
<div class='suckerdiv'>
<ul id='suckertree1'>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Forside</a>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Ungdom</a>
<ul>
<li><a href='#'>Minimix</a></li>
<ul>
<li><a href='#'>Info</a></li>
</ul>
<li><a href='#'>U10 Piger</a></li>
<ul>
<li><a href='#'>Info</a></li>
</ul>
<li><a href='#'>U10 Drenge</a></li>
<ul>
<li><a href='#'>Info</a></li>
<li><a href='#'>Resultater Infosport</a></li>
</ul>
<li><a href='#'>U12</a></li>
<li><a href='#'>U14</a></li>
<li><a href='#'>Egedal U16</a></li>
<li><a href='#'>Egedal U18</a></li>
</ul>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Seniorer</a>
<ul>
<li><a href='#'>Dame senior</a></li>
<li><a href='#'>Herrer / Old Boys</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Hjemmekampe</a>
<ul>
<li><a href='#'>Stenløse</a></li>
<li><a href='#'>Ganløse</a></li>
<li><a href='#'>Biks, Dommerbord, Hal vagt, hjemmevagt, døm selv</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Om klubben</a>
<ul>
<li><a href='#'>Bestyrelsen</a></li>
<li><a href='#'>Historie</a></li>
<li><a href='#'>Find vej</a></li>
<li><a href='#'>Indmeldelsesblanket download</a></li>
<li><a href='#'>Kontingent</a></li>
<li><a href='#'>Etiske regler & vedtægter</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Debatforum</a>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Fotoalbum</a>
</li>
</ul>
</li>
</ul>
</div>";
closeside();
Redigeret af Tutsi d. 22-10-2009 23:43
|
|
|
|
|
|
Tutsi |
Lagt på d. 23-10-2009 00:16
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
Prøv at tag et kig på det jeg har markeret - så kan du se opbygningen af menuen. Den virker ihvertfald :)
Hvis du vil have linkene til at blive centreret, sætter du <li><center><a href='#'>Info</a></center></li> rundt om hver enkelt link.
Kode /*Credits: Assensvej.dk & Falkenbjerg.dk */
/*URL: http://www.assensvej.dk/ver7 *** http://www.falkenbjerg.dk/ */
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #FBF2E3;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background: #A29B7A;
}
.suckerdiv .subfolderstyle{
background: url(http://www.falkenbjerg.dk/arrow-list.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>
<script type='text/javascript'>
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Falkenbjerg.dk: http://www.falkenbjerg.dk/
var menuids=['suckertree1'] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName('ul')
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName('a')[0].className='subfolderstyle'
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+'px' //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (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.onmouseover=function(){
this.getElementsByTagName('ul')[0].style.display='block'
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName('ul')[0].style.display='none'
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use 'display:none' to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility='visible'
ultags[t].style.display='none'
}
}
}
if (window.addEventListener)
window.addEventListener('load', buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent('onload', buildsubmenus)
</script>
<div class='suckerdiv'>
<ul id='suckertree1'>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Forside</a>
[bcolor=#ffff66]
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Ungdom</a>
<ul>
<li><a href='#'>Minimix</a>
<ul>
<li><a href='#'>Info</a></li>
</ul>
</li>
<li><a href='#'>U10 Piger</a>
<ul>
<li><a href='#'>Info</a></li>
</ul>
</li>
<li><a href='#'>U10 Drenge</a>
<ul>
<li><a href='#'>Info</a></li>
<li><a href='#'>Resultater Infosport</a></li>
</ul>
</li>
<li><a href='#'>U12</a></li>
<li><a href='#'>U14</a></li>
<li><a href='#'>Egedal U16</a></li>
<li><a href='#'>Egedal U18</a></li>
</ul>
</li>
[/bcolor]
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Seniorer</a>
<ul>
<li><a href='#'>Dame senior</a></li>
<li><a href='#'>Herrer / Old Boys</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Hjemmekampe</a>
<ul>
<li><a href='#'>Stenløse</a></li>
<li><a href='#'>Ganløse</a></li>
<li><a href='#'>Biks, Dommerbord, Hal vagt, hjemmevagt, døm selv</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Om klubben</a>
<ul>
<li><a href='#'>Bestyrelsen</a></li>
<li><a href='#'>Historie</a></li>
<li><a href='#'>Find vej</a></li>
<li><a href='#'>Indmeldelsesblanket download</a></li>
<li><a href='#'>Kontingent</a></li>
<li><a href='#'>Etiske regler & vedtægter</a></li>
</ul>
</li>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Debatforum</a>
<li><a href='#' target='_blank'><img src='http://www.sh-k.dk/ikon/sh30d.gif' border='0' alt=''>Fotoalbum</a>
</li>
</ul>
</li>
</ul>
</div>";
closeside();
Redigeret af Tutsi d. 23-10-2009 00:31
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
Ludvig73 |
Lagt på d. 23-10-2009 09:36
|
Begynder
Antal indlæg: 5
Tilmeldt: 21/10/2009 23:18
|
Tak ellen.
Det er nu lykkedes mig at lave en menu i tre niveauer.
Se http://www.sh-k.dk
Jeg mangler nu kun at <VALIGN=MIDDLE> således at overskrifterne (Forside, Ungdom etc.) står i midten af gif'en. Men jeg ved ikke hvor jeg skal copy/paste dette ind. Kan jeg gøre dette i styles ?
Kan jeg i øvrigt ændre størrelsen på overskrifterne (kun) uden at submenuerne bliver større også ?
Sluttelig, kan jeg gøre det såldes at de menupunkter som har submenuer ikke har gennemsigtig baggrund ?
Eks. Ungdom, Seniorer etc.
Tak på forhånd. |
|
|
|
|
|
Tutsi |
Lagt på d. 23-10-2009 16:22
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
Baggrunden sætter du ganske enkelt ind i styles der er øverst i filen.
Du kan ikke kun sætte teksten til middle, den vil også sætte billedet opad. Tekst og billede står på samme linie. Man kan evt. søtte billedet ind som baggrund, men har jeg ikke testet.
Str. på teksten ændrer du også i styles øvest i filen, men den vil ændre begge steder. Du indsætter font-size: 14px; .
Kode .suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
[bcolor=#ffff99]background: #FBF2E3;[/bcolor]
}
.suckerdiv ul li{
position: relative;
[bcolor=#ffff99]background: #FBF2E3;[/bcolor]
}
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
[bcolor=#ffff99]background: #FBF2E3;[/bcolor]
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #FBF2E3;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
[bcolor=#ffff99]background: #FBF2E3;[/bcolor]
}
.suckerdiv ul li a:hover{
background: #A29B7A;
}
.suckerdiv .subfolderstyle{
background: url(http://www.falkenbjerg.dk/arrow-list.gif) no-repeat center right;
}
Redigeret af Tutsi d. 23-10-2009 20:58
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
Ludvig73 |
Lagt på d. 23-10-2009 23:40
|
Begynder
Antal indlæg: 5
Tilmeldt: 21/10/2009 23:18
|
Tak. for din store hjælp.
Ærgeligt at man ikke kan valign teksten således at den står i midten - alternativt må jeg formindste billederne, så de passer sammen. |
|
|
|
|
|
Tutsi |
Lagt på d. 23-10-2009 23:59
|
Superadministrator
Antal indlæg: 2409
Tilmeldt: 24/02/2009 19:12
|
Jeg kan ikke sige om man kan, men jeg kan ikke lige umiddelbart se andet, end hvis man ligger billedet ind som baggrund i stedet for, og så tilføjer lidt padding i styles.
Men måske andre her lige har en løsning.
______________________________
Hilsen Ellen
______________________________
www.jensens-madbl...
"Den som opfatter sig som færdiguddannet, er mere færdig end uddannet"
|
|
|
|
|
|
Ludvig73 |
Lagt på d. 24-10-2009 10:26
|
Begynder
Antal indlæg: 5
Tilmeldt: 21/10/2009 23:18
|
Uanset hvad - så mange tak for hjælpen, den har været uvurderlig. Og tak til Assensvej.dk & Falkenbjerg.dk for denne Vertical Submenu.
Jan |
|
|
|
|