CIO Tech Eksperten IT-JOB IT-Kurser Events Podcast Søg

Log ind eller opret profil

Du kan også logge ind via nedenstående tjenester

jakobdo Ekspert

02. juli 2011 - 09:00 Der er 6 kommentarer og
1 løsning

Opret en "menu" / listing af data, som matcher længeste element

Hej,
nogle gange kigger man sig blind på et problem.

F.eks. er jeg ved at udvikle en menu, men er nået til et problem, som jeg ikke kan løse pt.

Jeg ønsker en liste / box / menu etc... ala:

Item 1
Long item 2
Tiny
Longer item 3
4
Hmm

Og disse skal så være i en styling, som gør at alle elementer er i en "boks", uden fast bredde.
Men alle de underlæggende elementer, listet herover, skal have samme bredde.
Kan man lave det i ren html og css?

F.eks. kan i se dette eksempel:
http://clarklab.net/blog/articles/dropdown/example.html

Der er menu-punkterne lige lange, men det laves med en fast bredde.
Kan man ikke lave den "faste bredde" dynamisk, så menuen bare tilpasser sig bredeste element?

Synes godt om

NielsErikP Mester

02. juli 2011 - 10:12 #1

Hej..
Bare en tanke..
Er man ikke nød til at have noget der tæller længden på linket, tror jeg ik man kan med ren html/css. Og så sætte en id med en padding effekt, når man ":hover", over linket, der kan bredden jo også sættes.
Som sagt bare en tanke!!!

Synes godt om

jakobdo Ekspert

02. juli 2011 - 10:24 #2

Jeg er netop ved at kigge på en løsning, hvor bredden beregnes via javascript.

Synes godt om

NielsErikP Mester

02. juli 2011 - 10:34 #3

Hej..
Lad os høre..
Sådan det ik bare er for at give sig selv point!

Synes godt om

majbom Novice

02. juli 2011 - 10:43 #4

kan godt være jeg misforstår dit problem, men hvad er der galt med det eksempel du viser?

-> #3 - jeg tror ikke at du skal være bange for at jakob tager points selv, hvis andre har fortjent dem!

Synes godt om

jakobdo Ekspert

02. juli 2011 - 10:43 #5

Jeg løste det på denne måde:

function showSubmenu(){
obj = $(this).children("ul.subnav");
obj.css('z-index',100).slideDown('fast');
maxWidth = 0;
$("li",obj).each(function(){
maxWidth = Math.max(maxWidth,$(this).width());
});
$("li",obj).each(function(){
$(this).width(maxWidth);
});
}

Da bredden ikke kan beregnes på et element med display:none;
Så kan første beregne bredden efter det bliver vist.

Synes godt om

jakobdo Ekspert

02. juli 2011 - 10:45 #6

Og lukker... (bare for at tage point selv) :o)

#4 Det eksempel jeg viser, har fast bredde og dermed en masse ekstra space til højre for teksten i menu punkterne.
Og det er netop det jeg ønsker at undgå og derfor blev js løsningen.

Synes godt om

majbom Novice

02. juli 2011 - 10:46 #7

aah på den måde - så misforstod jeg spørgsmålet i første omgang :)

Synes godt om

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.

Følg dette spørgsmål

Opret Preview

Webudvikling kurser

Vi tilbyder markedets bedste kurser inden for webudvikling

Se alle Webudvikling kurser

Flere spørgsmål fra HTML kategorien

Titel	Indlæg	Oprettet	Seneste aktivitet
Hjælp med HTML og CSS Af Nojsa i HTML	18	10/09/202515:07	17/09/202515:11
CSS 2 x firkanter + tekst på samme linje Af nemlig i HTML	3	19/03/202522:16	20/03/202513:04
Se og ændre html på en webside Af magger i HTML	4	11/03/202513:55	12/03/202506:56
Få input felt, der er med fed skrift og formatteres på linje Af KurtG i HTML	5	02/03/202520:05	04/03/202515:40
Variabler som ikke virker Af Frits Jensen i HTML	3	30/10/202409:37	01/01/202515:27

Se alle spørgsmål i kategorien Opret spørgsmål

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

Alle kategorier på Eksperten

Seneste artiklerRSS