Avatar billede Sanne Praktikant
15. april 2005 - 12:55 Der er 17 kommentarer

CSS vertikal menu

Jeg har fundet en gratis vertikal CSS menu, som jeg gerne vil rette lidt på. Jeg kan se, hvordan jeg skal rette tekst- og baggrundsfarver, men jeg vil gerne have indsat noget kode, så jeg kan få en lille pil til højre i hvert menupunkt, som har en undermenu.

Såvidt jeg kan se, bør koden ikke placeres i css-delen, da det så vil være alle menupunkter, der får sådan en pil, uanset om der eksisterer et underpunkt eller ej. Alternativet må så være et inline-tag, der angiver en absolut placering af et baggrundsbillede, som indeholder en pil. Dette kan sikkert også laves smart i javascript, men dette har jeg endnu mindre forstand på end css!

Er der nogen, der kan anvise, hvilken kode, der skal indsættes, samt hvor den skal indsættes?

Eller er der nogen, der kan anvise et link til et website, hvor jeg kan hente koden og se, hvordan det gøres?
Avatar billede hyberpreprocessor Nybegynder
15. april 2005 - 13:02 #1
du indsætter bare et background billede. (CSS)

style="background: url(pil.jpg) no-repeat top left;"
Avatar billede Sanne Praktikant
15. april 2005 - 13:06 #2
Men denne position "top left" vil vel kunne gælde øverste menupunkt, ikke sandt?
Avatar billede hyberpreprocessor Nybegynder
15. april 2005 - 13:15 #3
nej, left betyder at billedet ryger ud i venstre side. og top er for at IE 5 også viser det, det korrekte sted.

CSS har jo intet med dine menupunker at gøre, det virker på alle elementer hvor du tilføjer det.
Avatar billede Sanne Praktikant
15. april 2005 - 13:36 #4
...og så er det, at jeg kan se, at jeg ved for lidt om at bruge css-menuer ;o)

Præcis hvor skal dette inline-tag placeres i min liste?

<li><a name="navigation" href="http://www.test.dk/">1</a>
        <ul>
            <li><a href="http://www.test.dk/1a">1a</a></li>
            <li><a href="http://www.test.dk/1b">1b</a></li>
            <li><a href="http://www.test.dk/1c">1c</a></li>
        </ul>
Avatar billede hyberpreprocessor Nybegynder
15. april 2005 - 13:40 #5
Hvordan skulle jeg vide det, du har ikke kommet med din totale kode.

Hvis du definere et menupunkt med <li><a href="http://www.test.dk/1a">1a</a></li>
kan du bare bruge et helt alm. kedeligt html tag, nemlig <img> :P

<li><img src="pil.jpg" alt="-->"><a href="http://www.test.dk/1a">1a</a></li>
Avatar billede Sanne Praktikant
15. april 2005 - 13:43 #6
Beklager - og mange tak fordi du gider hjælpe. Her følger koden:

<html>
<title>CSS til vertical</title>
<head>




<style type="text/css">

ul.vertical, ul.vertical li {
    margin:0;
    padding:0;
    list-style-type:none;
    font-size:100%;
    }

ul.vertical {
    position:absolute;
    z-index:1000;
    cursor:default;
    width:8em;
    left:1em;
    top:4.05em;
    }

ul.vertical li {
    position:relative;
    text-align:left;
    cursor:pointer;
    cursor:hand;
    width:8em;
    margin:-1px 0 0 0;
    }

ul.vertical ul {
    z-index:1020;
    cursor:default;
    position:absolute;
    width:8.2em;
    margin: 0 0 3em;
    top:-100em;
    left:-1px;
    padding:1px 0 0 0;
margin-left: 8em;

    }
   
ul.vertical ul li {
    width:8.2em;
    }

ul.vertical ul ul {
    margin:0em 0 0 8.2em;
    }

@media Screen, Projection {
    ul.vertical li:hover > ul { top:0; }
    }

ul.vertical a, ul.vertical a:visited {
    display:block;
    cursor:pointer;
    cursor:hand;
    background:#ffc;
    border:1px solid #edbb85;
    padding:5px 7px;
    font:normal normal bold 0.7em tahoma, verdana, sans-serif;
    color:#008000;
    text-decoration:none;
    letter-spacing:1px;
    }
   
ul.vertical a:hover, ul.vertical a:focus, ul.vertical a.rollover, ul.vertical a.rollover:visited {
    background:#ffefcf;
    color:#806020;
    }



@media screen, projection {
    * html ul.vertical li {
        display:inline;
        f\loat:left;
        background:#ffffff;
        }
    }
* html ul.vertical li { position:static; }
* html ul.vertical a { position:relative; }
ul[class^="vertical"] ul { display:none; }
ul[class^="vertical"] ul { displa\y:block; }

</style>
<script type="text/javascript">




window.onload = function()
{
    var verticals = new simpleMenu('menu-v', 'vertical');
    var horizontals = new simpleMenu('menu-h', 'horizontal');
};



function simpleMenu(navid, orient){if(typeof document.getElementById == 'undefined' || /opera[\/ ][56]/i.test(navigator.userAgent)) { return; }this.iskde = navigator.vendor == 'KDE';this.isie = typeof document.all != 'undefined' && typeof window.opera == 'undefined' && !this.iskde;this.isoldsaf = navigator.vendor == 'Apple Computer, Inc.' && typeof XMLHttpRequest == 'undefined';this.tree = document.getElementById(navid);if(this.tree != null){this.items = this.tree.getElementsByTagName('li');this.itemsLen = this.items.length;var i = 0; do{this.init(this.items[i], this.isie, this.isoldsaf, this.iskde, navid, orient);}while (++i < this.itemsLen);}}simpleMenu.prototype.init = function(trigger, isie, isoldsaf, iskde, navid, ishoriz){trigger.menu = trigger.getElementsByTagName('ul').length > 0 ? trigger.getElementsByTagName('ul')[0] : null;trigger.link = trigger.getElementsByTagName('a')[0];trigger.issub = trigger.parentNode.id == navid;trigger.ishoriz = ishoriz == 'horizontal';this.openers = { 'm' : 'onmouseover', 'k' : (isie ? 'onactivate' : 'onfocus') };for(var i in this.openers){trigger[this.openers[i]] = function(e){if(!iskde) { trigger.link.className += (trigger.link.className == '' ? '' : ' ') + 'rollover'; }if(trigger.menu != null){if(trigger.ishoriz) { trigger.menu.style.left = (isie || isoldsaf) ? trigger.offsetLeft + 'px' : 'auto'; }trigger.menu.style.top = (trigger.ishoriz && trigger.issub) ? (isie || (trigger.ishoriz && isoldsaf)) ? trigger.link.offsetHeight + 'px' : 'auto' : (isie || (trigger.ishoriz && isoldsaf)) ? trigger.offsetTop + 'px' : '0';}};}this.closers = { 'm' : 'onmouseout', 'k' : (isie ? 'ondeactivate' : 'onblur') };for(i in this.closers){trigger[this.closers[i]] = function(e){this.related = (!e) ? window.event.toElement : e.relatedTarget;if(!this.contains(this.related)){if(!iskde) { trigger.link.className = trigger.link.className.replace(/[ ]?rollover/g, ''); }if(trigger.menu != null){trigger.menu.style[(trigger.ishoriz ? 'left' : 'top')] = trigger.ishoriz ? '-10000px' : '-100em';}}};}if(!isie){trigger.contains = function(node){if (node == null) { return false; }if (node == this) { return true; }else { return this.contains(node.parentNode); }};}}

</script>
</head>
<body>

<ul id="menu-v" class="vertical">
    <li><a name="navigation" href="http://www.test.dk/">1</a>
        <ul>
            <li><a href="http://www.test.dk/1a">1a</a></li>
            <li><a href="http://www.test.dk/1b">1b</a></li>
            <li><a href="http://www.test.dk/1c">1c</a></li>
        </ul>
    </li>
    <li><a href="http://www.test.dk/2">2</a>
        <ul>
            <li><a href="http://www.test.dk/2a">2a</a></li>
            <li><a href="http://www.test.dk/2b">2b</a></li>
            <li><a href="http://www.test.dk/2c">2c</a></li>
        </ul>
    </li>
    <li><a href="http://www.test.dk/3">3</a>
        <ul>
            <li><a href="http://www.test.dk/3a">3a</a></li>
            <li><a href="http://www.test.dk/3b">3b</a></li>
            <li><a href="http://www.test.dk/3c">3c</a></li>
        </ul>
    </li>
    <li><a href="http://www.test.dk/4">4</a></li>
    <li><a href="http://www.test.dk/5">5</a>
        <ul>
            <li><a href="http://www.test.dk/5a">5a</a>
                <ul>
                    <li><a href="http://www.test.dk/5a/a">5aa</a></li>
                    <li><a href="http://www.test.dk/5a/b">5ab</a></li>
                    <li><a href="http://www.test.dk/5a/c">5ac</a></li>
                    <li><a href="http://www.test.dk/5a/d">5ad</a></li>
                </ul>
            </li>
            <li><a href="http://www.test.dk/5b">5b</a></li>
            <li><a href="http://www.test.dk/5c">5c</a></li>
            <li><a href="http://www.test.dk/5d">5d</a></li>
        </ul>
    </li>
    <li><a href="http://www.test.dk/6">6</a>
       
    </li>
</ul>
</body>
</html>
Avatar billede hyberpreprocessor Nybegynder
15. april 2005 - 13:50 #7
Det mest optimale er klart at sætte et alm. billede ind.

<li><a name="navigation" class="pil" href="http://www.test.dk/"><img src="pil.jpg">1</a>

Ellers skal der ændres en del i din CSS.
Avatar billede Sanne Praktikant
15. april 2005 - 13:55 #8
Tusind tak for hjælpen - det tror jeg faktisk lige, at jeg kan finde ud af så :o)

Hvis du vil have pointene, så skal du lige poste noget som "Svar" - ellers kan jeg ikke tildele pointene til dig.
Avatar billede Sanne Praktikant
15. april 2005 - 14:20 #9
Hmm - det virker så heller ikke lige, men skidt pyt, jeg må nøjes med menuen uden pile.
Avatar billede Sanne Praktikant
15. april 2005 - 14:54 #10
FYI - jeg fik løst problemet vha. inline-tags....og så skulle der refereres til background-image i stedet for background :o)
Avatar billede roenving Novice
15. april 2005 - 14:55 #11
Hvad med bare at tilføje baggrundsbillede i de relevante punkter med en class ?-)

            <li class="pil"><a href="http://www.test.dk/5a">5a</a>

-- og så i stylesheetet:

.pil{
  background: url(pil.gif) no-repeat center right;
}
Avatar billede Sanne Praktikant
15. april 2005 - 15:10 #12
Det ser jo bestemt smart ud - men jeg kan bare ikke få det til at virke :o(
Avatar billede roenving Novice
15. april 2005 - 15:11 #13
Hrm, det skal nok smides i a-tagget så:

<li><a class="pil" href="http://www.test.dk/5a">5a</a>
Avatar billede Sanne Praktikant
15. april 2005 - 15:15 #14
Virker heller ikke umiddelbart :o(
Avatar billede Sanne Praktikant
15. april 2005 - 15:22 #15
Jeg kan godt få det til at virke med et inline-tag...i IE, men i Mozilla gentages billedet, så "background-repeat: no-repeat" må skulle hedde noget mere for at kunne forstås af Mozilla - noget forslag?
Avatar billede roenving Novice
15. april 2005 - 15:26 #16
Avatar billede Sanne Praktikant
15. april 2005 - 15:32 #17
Det kan jeg da godt forstå, at du ikke kan forstå - for nu virker det såmænd ;o)
Jeg forstår dog ikke, hvorfor dit forslag ikke virker - det burde da fungere, når der oprettes en klasse i stylesheetet, som så "kaldes" med class="pil"!

Thanx :o)
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