Som besökare på Hamsterpaj samtycker du till användandet av s.k. cookies för att förbättra din upplevelse hos oss. Jag förstår, ta bort denna ruta!
Annons

HTML menyer

Skapad av Borttagen, 2010-02-26 22:40 i Min hemsida & surftips

1 019
6 inlägg
0 poäng
kevin931
Visningsbild
P 31 Ronneby Hjälte 2 inlägg
2010-02-26 22:40
0
Någon som kan guida mig om jag vill göra en liknande drop-down meny(rätt ord?) som finns på denna sida?
http://www.hviidehus.com/sv/#

Vet att man ska använda CSS och list-taggar men jag är inte så duktig på CSS, så om någon skulle hjälpa mig vore jag evigt tacksam.
Direktlänk Svara på inlägg Gästbok
Skicka

Är reklamen ivägen? Logga in eller registrera dig så försvinner den!

zwete
Visningsbild
P 32 Hölö Hjälte 1 663 inlägg
2010-02-26 22:43
0

Svar till kevin931 [Gå till post]:

Har för mig att man använder javascript till det, men jag kan ha fel.

Du är så jävla fin och skön och mina drömmars tjej. Men jag kan aldrig aldrig aldrig aldrig bli ihop med dig. För du är moderat! Moderat!

Direktlänk Svara på inlägg Gästbok
Skicka
Mleyton
Visningsbild
24 Motala Hjälte 162 inlägg
2010-02-26 22:46
0
Det är Dropdown menyer och dom finns i olika varianter men dom vanligaste är basserade på boxar och javascript

Gud

Direktlänk Svara på inlägg Gästbok
Skicka
MosHiBi
Visningsbild
P 32 Skara Hjälte 4 994 inlägg
2010-02-26 22:50
0
kolla webdesignskolan dom har bra grejer att antingen läsa och lära sig eller kopiera

one by one the penguins steal my sanity

Direktlänk Svara på inlägg Gästbok
Skicka
csols
Visningsbild
P 29 Hjälte 2 524 inlägg
2010-02-26 22:53
0
Svar till kevin931 [Gå till post]:
Google. It's the shit.

Seriöst, googla på "css guide" eller något sånt, du lär få 100 miljoner träffar. Kom tbx hit om inte en enda utav dom ger dig en grundkurs i CSS.

Och så var det drop-down menyerna. I suggest att du ska kolla i källkoden, det blir så mycket lättare då...

html koden, byt ut/lägg till länkar som du vill:
Ett stycke html-kod:


<ul id="navmenu">
  <li><a href="/sv/">AKTUELLT</a></li>

  <li><a href="#">HOTELLET</a>
    <ul>
	 <li><a href="/sv/info/20060921082173137906.shtml">Information</a></li>
<li><a href="/sv/info/20060921103712861078.shtml">Historik</a></li>

<li><a href="/sv/info/20060924510989030880.shtml">Bilder omgivning</a></li>
<li><a href="/sv/info/20060921115576450773.shtml">Reception/Lobby</a></li>

	  <li><a href="#">Våra rum »</a>
        <ul>
			<li><a href="/sv/info/20060922332267932927.shtml">12 Italiana</a></li>
<li><a href="/sv/info/20060922335960035954.shtml">14 Castagna</a></li>
<li><a href="/sv/info/20060922341893383079.shtml">15 Rosenhaga</a></li>

<li><a href="/sv/info/20060922343507956153.shtml">20 Flora</a></li>
<li><a href="/sv/info/20060922345364891412.shtml">21 Viola</a></li>
<li><a href="/sv/info/20060922351440604794.shtml">22 Vera</a></li>
<li><a href="/sv/info/20060922353771390346.shtml">23 Dagmar</a></li>
<li><a href="/sv/info/20060922355530732077.shtml">24 Nina</a></li>
<li><a href="/sv/info/20060922361027057624.shtml">25 Wega</a></li>
<li><a href="/sv/info/20060922362436932406.shtml">26 Frida</a></li>
<li><a href="/sv/info/20060922364133028360.shtml">27 Emma</a></li>
<li><a href="/sv/info/20060922370172474556.shtml">28 Svea</a></li>

        </ul>
      </li>
	<li><a href="/include/pdf/rumspriser-sv.pdf" target=_blank>Priser</a></li>
    </ul>
  </li>

  <li><a href="#">RESTAURANGEN</a>
    <ul>

		<li><a href="/sv/info/20060921162558169867.shtml">Salong Hviidehus</a></li>

		<li><a href="/include/pdf/alacarte-sv.pdf" target=_blank>A la Carte</a></li>
		<li><a href="/include/pdf/helgmeny-sv.pdf" target=_blank>Helgmeny</a></li>
		<li><a href="/include/pdf/specialmeny-sv.pdf" target=_blank>Specialmenyer</a></li>
    </ul>
  </li>

  <li><a href="#">KONFERENS</a>
  	<ul>
		<li><a href="/sv/info/20060921170548878618.shtml">Konferenser</a></li>
<li><a href="/sv/info/20071125041236704598.shtml">Priser</a></li>

	</ul>

  <li><a href="#">AKTIVITETER</a>

  		<ul>
<li><a href="/sv/info/20060921052134079412.shtml">Allmänt aktiviteter</a></li>
<li><a href="/sv/info/20060921070292421039.shtml">Vinprovningar</a></li>
<li><a href="/sv/info/20060921062990893541.shtml">Whiskyprovning</a></li>
<li><a href="/sv/info/20060921060608562669.shtml">Chokladprovning</a></li>

		</ul>
	</li>

  <li><a href="#">KONTAKT</a>

		<ul>
<li><a href="/sv/info/20060921193071755154.shtml">Kontakta oss</a></li>
<li><a href="/sv/info/20060921200080082426.shtml">Hitta hit</a></li>

		</ul>
	</li>

</ul>

CSS koden, ändra inte allt för mkt ;)
Ett stycke css-kod:
a
{
  outline: none;
}
a:focus { -moz-outline-style: none; }

a.normal {color:#800000; text-decoration:none; font-weight: bold; border-bottom: 1px dotted #800000;}
a.normal:hover {background:#ebebd6; text-decoration:none; font-weight: bold;}

/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 500px; /*For KHTML*/
  list-style: none;
  height: 24px;
}

ul#navmenu li {
  margin: 0;
  border: 0 none;
  padding: 0;
  float: left; /*For Gecko*/
  display: inline;
  list-style: none;
  position: relative;
  height: 24px;
}

ul#navmenu ul {
  margin: 0;
  border: 0 none;
  padding: 0;
  width: 160px;
  list-style: none;
  display: none;
  position: absolute;
  top: 24px;
  left: 0;
}

ul#navmenu ul:after /*From IE 7 lack of compliance*/{
  clear: both;
  display: block;
  font: 1px/0px serif;
  content: ".";
  height: 0;
  visibility: hidden;
}

ul#navmenu ul li {
  width: 160px;
  float: left; /*For IE 7 lack of compliance*/
  display: block !important;
  display: inline; /*For IE*/
}

/* Root Menu */
ul#navmenu a {
  border: 1px solid #FBE5B4;
  border-right-color: #978150;
  border-bottom-color: #978150;
  padding: 0 6px;
  float: none !important; /*For Opera*/
  float: left; /*For IE*/
  display: block;
  background: #C9B382;
  color: #ffffff;
  font: 11px/22px Lucida Grande, Lucida Sans Unicode, Verdana, Arial, Helvetica, sans-serif;
  text-decoration: none;
  height: auto !important;
  height: 1%; /*For IE*/
}

/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
  background: #978150;
  color: #FFF;
}

/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
  float: none;
  background: #C9B382;
  color: #fff;
}

/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
  background: #978150;
  color: #FFF;
}

/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
  background: #C9B382;
  color: #fff;
}

/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
  background: #978150;
  color: #FFF;
}

/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
  background: #C9B382;
  color: #fff;
}

/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
  background: #978150;
  color: #FFF;
}

ul#navmenu ul ul,
ul#navmenu ul ul ul {
  display: none;
  position: absolute;
  top: 0;
  left: 160px;
}

/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
  display: none;
}

ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
  display: block;
}


Vettefan om all denna css kod är nödvändig, går säkert att slimma den lite... Men

Herp

Direktlänk Svara på inlägg Gästbok
Skicka
Rambutan
Visningsbild
P 31 Farsta Hjälte 2 118 inlägg
2010-02-26 22:54
0
http://javascript.nu/javascript/index.shtml
Finns säkert något sånt script där.. javascript.nu är en fin sida :)

Ingen status

Direktlänk Svara på inlägg Gästbok
Skicka

Forum » Mellan Himmel och Jord » Min hemsida & surftips » HTML menyer

Ansvariga ordningsvakter:

Användare som läser i den här tråden just nu

1 utloggad

Skriv ett nytt inlägg

Hej! Innan du skriver om ett potentiellt problem så vill vi påminna dig om att du faktiskt inte är ensam. Du är inte onormal och världen kommer inte att gå under, vi lovar! Så slappna av och gilla livet i några minuter - känns det fortfarande hemskt? Skriv gärna ner dina tankar och frågor, vi älskar att hjälpa just dig!

Den här tråden är äldre än Rojks drömtjej!

Det senaste inlägget i den här tråden skrevs för över tre månader sedan. Är du säker på att du vill återuppliva diskussionen? Har du något vettigt att tillföra eller passar din fråga i en ny tråd? Onödiga återupplivningar kommer att låsas så tänk efter en extra gång!

Rubrik

Inlägg

Fet Kursiv Spoiler Bild Film Kod Undersökning

Förhandsgranska Spara

Hjälp

Det här är en hjälpruta

Här får du korta tips och förklaringar om forumet. Välj kapitel i rullningslisten här ovanför.

Rutan uppdateras automagiskt

När du använder funktioner i forumet så visas bra tips här.


Annons
Annons
Annons
Annons