Gå til innhold

Wordpress: Dynamiske knapper (<li>)


Anbefalte innlegg

Heisann!

 

Har akkurat beveget meg inn på Wordpress theme delen, og driver og designer mitt eget theme nå.

 

Har satt meg inn i det grunnleggende, og veit rent basic hva jeg driver med.

 

 

Så har jeg kommet over en template jeg syntes hadde et passende oppsett, og jeg driver og redesigner denne nå. Men når det gjelder denne, trenger jeg å lage noen menyknapper som er dynamiske (uavhengig av skriftlengde). Jeg har designet de, og trenger bare og få det ut riktig i kode.

 

Vil gjerne få det til noe lignende som han her har fått det til med menyknappene: N.Design Studio

 

 

Illustrasjon av mine designede knapper:

post-91181-1198189827_thumb.jpg

 

Har drivi og rotet litt med CSS, men får det ikke til.

 

Her er hva jeg har komme ut med hittil:

 

Klikk for å se/fjerne innholdet nedenfor
#nav {
list-style: none;
margin: 0px;
position: absolute;
right: 10px;
bottom: 0px;
}
#nav li {
float: left;
margin-left: 5px;
}
#nav .current_page_item a, #nav .current_page_item a:visited{
color: #000000;
text-decoration: none;
}
/*#nav .page_item a{ /*originalen*/
color: #ffffff;
text-decoration: none;
background: #5c8d0c url(images/nav-button-bg.gif) repeat-x;
padding: 5px 15px;
font: bold 14px/100% Arial, Helvetica, sans-serif;
border-top: 1px solid #E6EED0;
border-left: 1px solid #AFCD69;
border-right: 1px solid #AFCD69;
display: block;
}*//*originalen*/
#nav .page_item a:hover {
color: #000000;
}*/

/* ==Modified dynamic hover== */
#nav .page_item a {	display: block;	float: left;	height: 28px; color: #ffffff; text-decoration: none; padding: 5px 15px; font: bold 14px/100% Arial, Helvetica, sans-serif; border-top: 1px solid #E6EED0;	border-left: 1px solid #AFCD69;	border-right: 1px solid #AFCD69; }
#nav .page_item a span { padding: 12px 16px 0 0;	float: left;	height: 28px;	cursor: pointer; }
#nav .page_item a:hover { color: #2a3298;	background: #e9e9e9 url(images/bg.submeny.li.left.gif) 0 100% no-repeat; }
#nav .page_item a:hover span { background: url(images/bg.submeny.li.right.gif) 100% 100% no-repeat; }

 

 

Hadde satt skikkelig stor pris på om noen hadde hjulpet meg med dette, da jeg er helt blank. Jeg driver selvsagt og prøver for harde livet, men er ikke akkurat noen stor fremgang..

 

Så jeg setter stor pris på svar! :)

Lenke til kommentar
Videoannonse
Annonse

Kikk litt i css koden på følgende side www.askjellrud.no. Kanskje den kan hjelpe. her er det både rounded corners og dynamisk bredde.

 

CMS-et er jo et annet (flere divisjoner over), men CSS bør være relativt likt uansett.

 

www.hi.no er tabbene høyrestilt.

 

Metoden du må bruke kalles "Sliding Doors".

 

Sida du linker til har ikke dynamisk bredde på tabbene, der er bredden satt for hver enkelt tab, se css for a-taggene i menyen.

 

Du kan også kikke hos Stu Nicholls. Han har mye menufancy.

Endret av Bolson
Lenke til kommentar

Nå kan jeg ikke Wordpress, men menyen er egentlig laget ved hjelp av "unordned list". Det er vel også standard i Wordpress.

 

Det som er litt spesielt her er at hvert menyvalg er gitt egen id for å kunne bruke forskjellige bakgrunnbilder. Id-ene et satt på li-taggen. Teksten er egentlig plassert lang utafor visning, dvs 900em til venstre (-900em). Så dersom du skal bare ha tekst i tabbene trenger du bare at Wordpress skriver ut menyen som følger:

 

<ul id="nav">
  <li class="act"><a href="#">Første valg</a></li>
  <li><a href="#">Andre valg</a></li>
  <li><a href="#">Tredje valg</a></li>
  <li><a href="#">Fjerde valg</a></li>
</ul>

 

Da kan du bruke CSS som på www.hi.no.

 

Vi du ha bilder i tabbene, må du sette opp menyen til å ha class eller id på hvert menyvalg. Her kan du bruke id, i og med at hvert valg skal ha en spesifikk verdi, og den vil ikke gjentas.

 

Bruk Firebug i Fx til å se på kodene og hvilken CSS som er satt på de ulike elementene.

 

Prøv alltid å lage koden så enkel som mulig i forhold til å oppnå det nødvendige.

Endret av Bolson
Lenke til kommentar

Takk skal du ha for godt svar.

 

Det blir vanskelig for meg å definere noe på de andre "pages" som kommer opp. Slik ser det ut i HTML:

 

<ul id="nav">
  <li class="page_item"><a href="<?php echo get_settings('home'); ?>/" title="Home"><span>Blogg</span></a></li>
  <?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?>
</ul>

 

Den første er jo grei, men det andre der med php kode?

 

 

En ting til, hvordan skal jeg også få en active state på knappene?

Endret av AnaXyd
Lenke til kommentar

Ville mest sagt, bytt CMS! Er glad jeg ikke trenger å se php når jeg lager sidemalene (selv om jeg også bruker PHP-basert CMS). Holder å bruke PHP til å programmere moduler.

 

<?php wp_list_pages('sort_column=menu_order&depth=1&title_li=');?> er vel koden som genererer menyen utenom "hjem". Sjekk hva denne genererer som sideinnhold, da skulle du finne aktuell kode som trengs for CSS

 

Hvordan man setter active state aner jeg ikke, i og med at jeg bruker noe helt annet.

 

Dette bør også være dokumentert i WordPress manualer.

 

Ellers er det jo flere i "Webkafeen" som håndterer WordPress, og bør kunne svare.

Lenke til kommentar

Jeg gjorde hele menyen statisk jeg. Gadd ikke å finne frem til den automatiske genereringen av innhold i denne omgang, da det tar for lang tid å finne ut.

 

Nå fungerer det også.. :) Trenger bare å finne en mulighet for å sette på active state på menyen.

 

 

Hvilket CMS ville du ha anbefalt istedet?

Lenke til kommentar
Hvilket CMS ville du ha anbefalt istedet?

 

Avhenger av hva slags nettsted man skal lage.

 

Wordpress er glimrende til blog/enkle nettsteder. Men du oppdaget selv at det krever litt når man skal lage egne design.

Drupal og e107 er bra for litt mer komplekse sider. Begge er relativt greie å sette opp.

Joomla, som mange liker, har jeg ikke sansen for i det hele.

TYPO3 er det mest avanserte i gruppen, og det som jeg bruker (og kan ikke tenke meg noe annet lengre). Men det er også det som på en måte tar lengst tid å lære. Men det har også en av de beste måten å knytte opp design på. Lag en rent HTML-mal og tilordne denne.

 

Du finner en "kort innføringsmanual" på typo3.no

Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...