Snygg meny?

Spider84 · 14 Dec 2003

Jag vet, jag vet jag har skrivit om det förut, men har inte fått tummen ur att få något gjort och det har inte känts tillräckligt inspirerande med det jag hittat som jag kan göra med menyn:

Här inne kan ni se den:

http://spider.has.it

Någon som har någon bra idé på hur man kan göra den snyggare eller byta ut den mot något roligare, proffsigare och eller snyggare?

Gärna tips på sidor där jag kan hämta inspiration. Har fått några bra tips innan om det, men jag har så dåligt minne.

Men nu har vi egen dator så nu kan jag lägga till det under Favoriter.

Dasjenka · 15 Dec 2003

Det finns ju många olika sätt att utforma menyer. Dels kan man ju ändra färg & form på olika sätt. Man kan bland annat fixa så att det blir en annan färg på texten när man håller pekaren över. På http://www.webdesignskolan.com/ kan du läsa mer om det under "CSS - stilmallar".

Sedan har ju du en ganska lång meny (jag är allergisk mot scroll) Eventuellt skulle man kunna fixa en drop-downmeny (du kan läsa mer om det på samma sida, men under "Javascript..")

Du skulle också kunna fixa en meny bestående av olika rubriker och underrubriker. T.ex. om du klickar på "Hästarna" kommer "Aminette", "Kyra" och "Pluto Zorro" upp. Det kan du läsa mer om här: http://internetworld.idg.se/tjanster/webbskolan/dhtml/del2/default.asp

loveponies · 16 Dec 2003

Jag tycker också att det vore snyggare med "dropdown" eller en med underubriker. Det skulle bli tydligare.
Kanske med någon mousover-effekt också, då blir det mer "levande".

Spider84 · 16 Dec 2003

Det sistnämnda hade onekligen varit intressant. Får ge mig in på det imorgon och fixa och dona.

För övrigt om jag nu vill ha en sådan menu finns det något sätt (program?) som man kan skriva in samma under alla sidorna utan att behöva öppna varje sida och greja runt...snurrigt, men du fattar säkert vad jag menar.

Spider84 · 16 Dec 2003

Då råkar väl inte känna för att ge mig ett exempel på hur de ska ligga i menyn?

Försökte nyss och man kan minst sagt säga att det inte blev rätt. All kodning hamnade "utanför" alltså så att den syntes på själva sidan.

Du kanske skulle kunna köra en kopiering på början av menyn och lägga in det som ska in? *fjäskar*

Dasjenka · 17 Dec 2003

Jag tror jag förstår hur du menar, men jag har tyvärr ingen lösning på ditt problem. :/

Många brukar "gå runt" problemet genom att välja att jobba med frames/iframes (du kan säkert läsa mer om det på webdesignskolan) istället för tabeller. Det finns både för- och nackdelar med att använda frames, men det är ju helt klart enklare än tabeller.

Att ordna frames nu hjälper iof inte dig eftersom du måste gå in på varje sida och göra justeringar för att få frames, men när du väl har frames är det väldigt enkelt att göra förändringar i menyn.

(lite off-topic egentligen, men ändå)

Dasjenka · 17 Dec 2003

Om du ska ha fyra rubriker bör du nog klistra in detta mellan <head> och </head>:

<script language="JavaScript">

function visadolj1(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a1"].src = bild.src
}
if(x == 2) {
document.images["a1"].src = oldbild.src
}
}

function visadolj2(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a2"].src = bild.src
}
if(x == 2) {
document.images["a2"].src = oldbild.src
}
}

function visadolj3(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a3"].src = bild.src
}
if(x == 2) {
document.images["a3"].src = oldbild.src
}
}

function visadolj4(obj) {

if(obj.style.display=='none') {
obj.style.display='block'
var x = 1
}
else {
obj.style.display='none'
var x = 2
}
var bild = new Image()
bild.src = "knapp.ut.gif"
var oldbild = new Image()
oldbild.src = "knapp.in.gif"
if(x == 1) {
document.images["a4"].src = bild.src
}
if(x == 2) {
document.images["a4"].src = oldbild.src
}
}
</script>

Sedan kommer länkarna mellan <body> och </body>:

<div id="huvud" onclick="visadolj1(u1)"><img src="knapp.in.gif" name="a1"> Avdelning 1</div>
<div id="u1" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 3</a><br>
</div>

<div id="huvud" onclick="visadolj2(u2)"><img src="knapp.in.gif" name="a2"> Avdelning 2</div>
<div id="u2" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 3</a><br>
</div>

<div id="huvud" onclick="visadolj3(u3)"><img src="knapp.in.gif" name="a3"> Avdelning 3</div>
<div id="u3" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 3</a><br>
</div>

<div id="huvud" onclick="visadolj4(u4)"><img src="knapp.in.gif" name="a4"> Avdelning 4</div>
<div id="u4" style="display: none">
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 1</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 2</a><br>
   <img src="knapp.neutral.gif"> <a href="http://internetworld.idg.se" id="sub">Länk 3</a><br>
</div>

(koderna finns i den exempelfil som man kan ladda ned från Internetworld)

Spider84 · 17 Dec 2003

Okej så de överst koderna som ska vara mellan head och gäller för hela sidan och sedan lägger man in de nedanstående koderna där man vill att det ska "fungera".

Ska genast ta och prova.

Spider84 · 17 Dec 2003

Fungerade alldeles utmärkt! :bow:

Nu funderar jag bara på hur man gör en bra "knapp". Det kan ju vara bra att det är en pil nedåt som visar att man kan trycka på länken också, men eftersom jag inte har något bild som heter knapp.gif så blir ju det lite svårt.

Och jag är ingen hejare på sånt. Har bara paint och Adobe photo shop 7.0 att jobba med. Några förslag?

Kanske finns att hämta på internet?

Spider84 · 17 Dec 2003

Åh jag blir vansinnig på mig själv.

Jag hittade en knapp för övrigt innan jag börja ösa ut mina andra problem.

Det funkade en gång, men sen måste jag ha ändrat något som gör att det inte fungerar.

Det enda jag kommer ihåg att jag gjort är att jag döpte knappbilden till knapp.gif istället för knapp.in.gif och jag tog bort img src med knappbilden för länkarna eftersom jag inte vill ha dem och sen så la jag in style="text-decoration: none"

Kiddo · 18 Dec 2003

På min hemsida (adress finns i signaturen, fast den är "olänkad") finns ett exempel på - vad jag tycker är - en välordnad meny.

Kiddo · 18 Dec 2003

...undviker numera allt som innehåller "java" eller "script" i namnet + allt som har med frames att göra (även iframes) för att sidan ska fungera i alla webläsare, även modell äldre. Tabeller använder jag bara i undantagsfall (exempel: "Grafik", "Snuttis" + avatarsidorna i menyn, där tabeller används för att rada upp bilderna med jämna mellanrum o.s.v.).

ScissorHands · 18 Dec 2003

vet ett sätt att kunna ändra färg å stuff på allt, men jag har aldrig annvänt det själv. vet därför inte fult ut hur det funkar, men tror det var nått script man har brevid som man sedan 'hänvisar' till med css koder eller vad det heter.
nån annan kanske vet vad jag tänker på å kan säga om det skulle fungera eller ej.

skall försöka leta upp å prov-göra en sån sida nu tror jag.. har lite tråkig å måste prova det där. orkar jag genomföra idén nu så återkommer jag.

Spider84 · 18 Dec 2003

Nu har jag löst problemet och fått till allt. Så här blev det:

http://spider.has.it

Jag har dock inte hunnit med alla sidor än.

Tack för hjälpen. :bow:

Och tack alla andra för tipsen.

VildochVacker · 18 Dec 2003

Får man kritisera lite? Tycker sidan är fin, men synd att den ligger på spray med all reklam, testa tex. http://www.t35.com
Menyn tyckte jag blev lite konstig nu eftersom markören inte ändras när man tar den över länkarna som "expanderas". Kan man ändra så det blir den vanliga markören? Skulle bli mycket enklare då

Dasjenka · 18 Dec 2003

Så bra att det löste sig med menyn.

Snyggt!

Laddade du ned exempelfilen från sidan jag länkade till? I sådant fall skulle du kunna klistra in den lilla kodsnutten som gör att det blir en "länkpil" när man håller pekaren över länkarna. Personligen föredrar jag nämligen att ha standardpekare till länkar, men det är ju en smakfråga.

Spider84 · 18 Dec 2003

Hade sidan där, men helt plötsligt hade allt raderata!

Efter det har jag inte orkat lägga upp den där igen, men jag har en adress där.

Dasjenka
Nej, jag snodde det du klistrade in.

Men jag får titta på det!

Spider84 · 18 Dec 2003

Försökte titta på de filerna, men hänger inte rikgti med på vilken det är du menar.

Vart ligger den koden mer exakt?

Finns ju expanderbarmeny
Alla bilder på pilarna m.m
och
rullgardin.

Känner mig lite lost som vanligt.

Spider84 · 18 Dec 2003

Nu först såg jag att det bara blir som när man skriver vanligt när man håller musen över länkarna. Seg eller vadå?

Hm...är det denna koden du menar:

<td width="100" style="background: #F0F0F0" height="20" onmouseover="visa(a1)" onmouseout="dolj(a1)" id="huvudm"><div onmouseover="this.style.cursor='hand'">Avdelning 1</div></td>
<td width="100" style="background: #F0F0F0" height="20" onmouseover="visa(a2)" onmouseout="dolj(a2)" id="huvudm"><div onmouseover="this.style.cursor='hand'">Avdelning 2</div></td>
<td width="100" style="background: #F0F0F0" height="20" onmouseover="visa(a3)" onmouseout="dolj(a3)" id="huvudm"><div onmouseover="this.style.cursor='hand'">Avdelning 3</div></td>
<td width="100" style="background: #F0F0F0" height="20" onmouseover="visa(a4)" onmouseout="dolj(a4)" id="huvudm"><div onmouseover="this.style.cursor='hand'">Avdelning 4</div></td>
<td width="100" style="background: #F0F0F0" height="20" onmouseover="visa(a5)" onmouseout="dolj(a5)" id="huvudm"><div onmouseover="this.style.cursor='hand'">Avdelning 5</div></td>

Inte så lätt att hitta rätt kod i den "viller vallan".

Som med all säkerhet är mycket mindre rörig än min sida.

Dasjenka · 19 Dec 2003

Det är inte lätt att hålla rätt på koder.

Om du inte har jobbat med css/stylesheets förut är det ju inte konstigt om du inte vet hur koden ser ut. Men prova att klistra in koden nedanför mellan <head> och </head> så ska det förhoppningsvis bli en hand över länkarna.

<style type="text/css">
#huvud {cursor: hand}
#sub {cursor: hand}
#u1 {cursor: hand}
#u2 {cursor: hand}
#u3 {cursor: hand}
#u4 {cursor: hand}
</style>

Snygg meny?

Spider84

Dasjenka

loveponies

Spider84

Spider84

Dasjenka

Dasjenka

Spider84

Spider84

Spider84

Kiddo

Kiddo

ScissorHands

Spider84

VildochVacker

Dasjenka

Spider84

Spider84

Spider84

Dasjenka

Liknande trådar

Välj ämne nedan

Bukefalos, Hästnyheter, Radannonser

Allmänt, Barn, Dagbok

Hund, Katt, Andra Djur

Hästrelaterat

Omröstningar