Forum Mjukvara Programmering och digitalt skapande Tråd Inlägg

Dummy CSS meny?

1
Skriv svar
Permalänk
Medlem
●

Dummy CSS meny?

Tja!

Behöver göra en meny till en mockup. Det ska vara tre länkar som ska vara markerbara när man klickar på dom.
Har klurat som fan men jag kan verkligen inte lista ut hur det ska gå till!

Alla tips är välkomna

Visa signatur

MacBook Pro 15" 2016
-
robin.se

Redigera
Citera flera Citera
Permalänk
Medlem
●
<a href="#">länk</a>

så? eller vad menar du?

Visa signatur

ASRock p67 extreme 4 | OCZ 240gb SSD + 320GB WDC + 1TB WDC GP | Intel Core i7 2600k | Nvidia Geforce GTX970 | 16gb Crucial Ballistix | Antec HC pro 1200w | Fractal define R2

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Pakki:

Tja!

Behöver göra en meny till en mockup. Det ska vara tre länkar som ska vara markerbara när man klickar på dom.
Har klurat som fan men jag kan verkligen inte lista ut hur det ska gå till!

Alla tips är välkomna

Gå till inlägget

Förstår inte alls hur du tänkt nu. Vad menar du med markerbara? Att dom ska byta färg under tiden nästa sida laddar (alltså när länken är aktiv) eller bara en vanlig hover?

Skrivet av Lofman: 
<a href="#">länk</a>

så? eller vad menar du?

Gå till inlägget

Fan vilken snygg meny. Tror jag aldrig sett en snyggare -.-

Visa signatur

Köp ny mus för 800:- JA, du kommer bli GRYM på cs och sätta huvudskott hela tiden. Du får heller ALDRIG ont i leder.
Eller är det bara så att e-pen*** förlängs om du har en dyrare mus?

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zillio:

Förstår inte alls hur du tänkt nu. Vad menar du med markerbara? Att dom ska byta färg under tiden nästa sida laddar (alltså när länken är aktiv) eller bara en vanlig hover?

Fan vilken snygg meny. Tror jag aldrig sett en snyggare -.-

Gå till inlägget

Trevlig du var då, det var mer menat som en fråga till vad han menade.
Gör en div för varje knapp och stylea med :hover :active osv

Visa signatur

ASRock p67 extreme 4 | OCZ 240gb SSD + 320GB WDC + 1TB WDC GP | Intel Core i7 2600k | Nvidia Geforce GTX970 | 16gb Crucial Ballistix | Antec HC pro 1200w | Fractal define R2

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av zillio:

Förstår inte alls hur du tänkt nu. Vad menar du med markerbara? Att dom ska byta färg under tiden nästa sida laddar (alltså när länken är aktiv) eller bara en vanlig hover?

Fan vilken snygg meny. Tror jag aldrig sett en snyggare -.-

Gå till inlägget

Sorry, sjukt trött men jag gör ett nytt försök.

Menyn ska gå att klicka på och varje list item ska ändra färg när man klickar, men inte leda någonstans.

Det är en mockup jag håller på med. Menyn är alltså bara "for show"

Så: när jag klickar på tex "contact" ska den list item delen byta färg och stanna kvar. Som vilken meny som helst fast länkarna inte ska leda någonstans.

Haha, hoppas att det är lite klarare nu.

Skickades från m.sweclockers.com

Visa signatur

MacBook Pro 15" 2016
-
robin.se

Redigera
Citera flera Citera
Permalänk
Medlem
●

Är detta en läxa/skolarbete?

För att en länk inte ska leda någonstans kan du "anchora" den (#).

Angående byta färg på när du klickar går att läsa på olika sätt.
Varför vill du göra detta?
Samt, vilka är dina kunskaper?
HTML, CSS, JS? Hur bra i varje?

Redigera
Citera flera Citera
Permalänk
Medlem
●

då tror jag bestämt du behöver javascript / jquery, kan återkomma med ett exempel. sitter med skärmtangentbord och mus just nu

Visa signatur

ASRock p67 extreme 4 | OCZ 240gb SSD + 320GB WDC + 1TB WDC GP | Intel Core i7 2600k | Nvidia Geforce GTX970 | 16gb Crucial Ballistix | Antec HC pro 1200w | Fractal define R2

Redigera
Citera flera Citera
Permalänk
Medlem
●

CSS

.button {
	background: #F9F9F9;
	width: 150px;
	height: 16px;
	font-weight: 500;
	font-size: 16px;
	padding: 8px;
	font-family: Arial;
	margin-bottom: 2px;
}
.buttonClicked {
	background: #CEF;
}

HTML / JavaScript+JQuery

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
	
	var lastButton = null;
	
	function handleClick(e){
		if (lastButton == e){
			lastButton=null;
			$(e).removeClass("buttonClicked");
		}
		else {
			if (lastButton != null){
				$(lastButton).removeClass("buttonClicked")
			}
			lastButton=e;
			$(e).addClass("buttonClicked");
		}
	}

</script>


<div class="button" onclick="handleClick(this)">
Korv
</div>

<div class="button" onclick="handleClick(this)">
Med
</div>

<div class="button" onclick="handleClick(this)">
Mos
</div>

testa det

Visa signatur

ASRock p67 extreme 4 | OCZ 240gb SSD + 320GB WDC + 1TB WDC GP | Intel Core i7 2600k | Nvidia Geforce GTX970 | 16gb Crucial Ballistix | Antec HC pro 1200w | Fractal define R2

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av Nikkop:

Är detta en läxa/skolarbete?

För att en länk inte ska leda någonstans kan du "anchora" den (#).

Angående byta färg på när du klickar går att läsa på olika sätt.
Varför vill du göra detta?
Samt, vilka är dina kunskaper?
HTML, CSS, JS? Hur bra i varje?

Gå till inlägget

Grundläggande kunskaper inom HTML och CSS. Det är inte någon läxa eller skolarbete.
Är ett företag som ska ha detta och projektansvarige ville att menyn skulle vara på det sättet.

Skrivet av Lofman:

CSS

.button {
	background: #F9F9F9;
	width: 150px;
	height: 16px;
	font-weight: 500;
	font-size: 16px;
	padding: 8px;
	font-family: Arial;
	margin-bottom: 2px;
}
.buttonClicked {
	background: #CEF;
}

HTML / JavaScript+JQuery

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
	
	var lastButton = null;
	
	function handleClick(e){
		if (lastButton == e){
			lastButton=null;
			$(e).removeClass("buttonClicked");
		}
		else {
			if (lastButton != null){
				$(lastButton).removeClass("buttonClicked")
			}
			lastButton=e;
			$(e).addClass("buttonClicked");
		}
	}

</script>


<div class="button" onclick="handleClick(this)">
Korv
</div>

<div class="button" onclick="handleClick(this)">
Med
</div>

<div class="button" onclick="handleClick(this)">
Mos
</div>

testa det

Gå till inlägget

Som jag misstänkte. Jävla Javascript!
Ska testa det första jag gör imorgon!

Tack

Visa signatur

MacBook Pro 15" 2016
-
robin.se

Redigera
Citera flera Citera
Permalänk
99:e percentilen ★
●
Skrivet av Lofman:

CSS

.button {
	background: #F9F9F9;
	width: 150px;
	height: 16px;
	font-weight: 500;
	font-size: 16px;
	padding: 8px;
	font-family: Arial;
	margin-bottom: 2px;
}
.buttonClicked {
	background: #CEF;
}

HTML / JavaScript+JQuery

<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.min.js"></script>
<script type="text/javascript">
	
	var lastButton = null;
	
	function handleClick(e){
		if (lastButton == e){
			lastButton=null;
			$(e).removeClass("buttonClicked");
		}
		else {
			if (lastButton != null){
				$(lastButton).removeClass("buttonClicked")
			}
			lastButton=e;
			$(e).addClass("buttonClicked");
		}
	}

</script>


<div class="button" onclick="handleClick(this)">
Korv
</div>

<div class="button" onclick="handleClick(this)">
Med
</div>

<div class="button" onclick="handleClick(this)">
Mos
</div>

testa det

Gå till inlägget

Snyggt, men är detta relevant för en meny? Kan inte riktigt förstå varför TS ska göra något som inte alls är användbart i verkligheten.

För i verkligheten använder man pseudo-klasserna :active eller :visited, beroende på vad man vill åstadkomma.

Visa signatur

Skrivet med hjälp av Better SweClockers

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HurMycket:

Snyggt, men är detta relevant för en meny? Kan inte riktigt förstå varför TS ska göra något som inte alls är användbart i verkligheten.

För i verkligheten använder man pseudo-klasserna :active eller :visited, beroende på vad man vill åstadkomma.

Gå till inlägget

Jag vet faktiskt inte ^^
Jag valde att tolka TS på detta sättet, hade varit kul med en lite mer detaljerad beskrivning av vad han håller på med

Visa signatur

ASRock p67 extreme 4 | OCZ 240gb SSD + 320GB WDC + 1TB WDC GP | Intel Core i7 2600k | Nvidia Geforce GTX970 | 16gb Crucial Ballistix | Antec HC pro 1200w | Fractal define R2

Redigera
Citera flera Citera
Permalänk
Medlem
●
Skrivet av HurMycket:

Snyggt, men är detta relevant för en meny? Kan inte riktigt förstå varför TS ska göra något som inte alls är användbart i verkligheten.

För i verkligheten använder man pseudo-klasserna :active eller :visited, beroende på vad man vill åstadkomma.

Gå till inlägget

Haha, I'm just following orders bro!

Är tydligen mer pedagogiskt!

Skrivet av Lofman:

Jag vet faktiskt inte ^^
Jag valde att tolka TS på detta sättet, hade varit kul med en lite mer detaljerad beskrivning av vad han håller på med

Gå till inlägget

Vet inte hur jag ska beskriva det på ett bättre sätt än mockup. Prototyp? Kanske?

EDIT: Löste det med Bootstrap! Tack för all hjälp
http://getbootstrap.com/2.3.2/javascript.html#buttons

Senast redigerat
Visa signatur

MacBook Pro 15" 2016
-
robin.se

Redigera
Citera flera Citera
1
Skriv svar
Senaste nyheterna
Hårdvara
Mjukvara
Övrigt
Nytt i forumet
Datorkomponenter
System
Ljud, bild och kommunikation
Spel och mjukvara