[Bijdrager bedhead]

Hoe is deze menubalk gemaakt? PRACHTIG!

Hallo iedereen

Omdat ik zelf wat geïnteresseerd ben in webdevelopment (amateur, gewoon voor de fun) wil ik vaak weten hoe iets gemaakt is. Bij deze site http://www.switch.be/ zou ik graag weten hoe de menubalk gemaakt is. Deze is eenvoudig, maar o zo knap. Weet iemand hoe dit gedaan is? Alvast bedankt!

Bedhead

[Inactief Anoniem]

Zie hier de code:

<br />
<li ><br />
							<a href="/nl/online-store.html" title="Online Store">Online Store</a></p>
<ul>
<li>
										<a href="/nl/categorie/208/switch-id-promoties.html" title="Switch ID Promoties">Switch ID Promoties</a>
									</li>
<li>
										<a href="/nl/categorie/301/ipod.html" title="iPod">iPod</a>
									</li>
<li>
										<a href="/nl/categorie/308/ipod-accessoires.html" title="iPod accessoires">iPod accessoires</a>
									</li>
<li>
										<a href="/nl/categorie/532/ipad.html" title="iPad">iPad</a>
									</li>
<li>
										<a href="/nl/categorie/516/ipad-accessoires.html" title="iPad accessoires">iPad accessoires</a>
									</li>
<li>
										<a href="/nl/categorie/450/iphone.html" title="iPhone">iPhone</a>
									</li>
<li>
										<a href="/nl/categorie/479/iphone-accessoires.html" title="iPhone accessoires">iPhone accessoires</a>
									</li>
<li>
										<a href="/nl/categorie/277/mac-computers.html" title="Mac computers">Mac computers</a>
									</li>
<li>
										<a href="/nl/categorie/337/mac-servers.html" title="Mac Servers">Mac Servers</a>
									</li>
<li>
										<a href="/nl/categorie/273/mac-accessoires.html" title="Mac accessoires">Mac accessoires</a>
									</li>
<li>
										<a href="/nl/categorie/285/beeldschermen.html" title="Beeldschermen">Beeldschermen</a>
									</li>
<li>
										<a href="/nl/categorie/332/airport--time-capsule.html" title="Airport & Time Capsule">Airport & Time Capsule</a>
									</li>
<li>
										<a href="/nl/categorie/326/software.html" title="Software">Software</a>
									</li>
<li>
										<a href="/nl/categorie/296/mac-games.html" title="Mac Games">Mac Games</a>
									</li>
<li>
										<a href="/nl/categorie/274/audio.html" title="Audio">Audio</a>
									</li>
<li>
										<a href="/nl/categorie/299/video.html" title="Video">Video</a>
									</li>
<li>
										<a href="/nl/categorie/287/opslag.html" title="Opslag">Opslag</a>
									</li>
<li>
										<a href="/nl/categorie/276/boeken.html" title="Boeken">Boeken</a>
									</li>
</ul>
<p>											<li ><br />
							<a href="/nl/nieuwscategorie/17/promoties.html" title="Promoties">Promoties</a></p>
<p>											<li ><br />
							<a href="/nl/winkels.html" title="Winkels">Winkels</a></p>
<ul>
<li>
										<a href="/nl/winkel/203/switch-antwerpen-theater.html" title="Switch Antwerpen Theater">Switch Antwerpen Theater</a>
									</li>
<li>
										<a href="/nl/winkel/204/switch-antwerpen-meir.html" title="Switch Antwerpen Meir">Switch Antwerpen Meir</a>
									</li>
<li>
										<a href="/nl/winkel/205/switch-wijnegem.html" title="Switch Wijnegem">Switch Wijnegem</a>
									</li>
<li>
										<a href="/nl/winkel/206/switch-waasland.html" title="Switch Waasland">Switch Waasland</a>
									</li>
<li>
										<a href="/nl/winkel/207/switch-gent.html" title="Switch Gent">Switch Gent</a>
									</li>
<li>
										<a href="/nl/winkel/208/switch-oostende.html" title="Switch Oostende">Switch Oostende</a>
									</li>
<li>
										<a href="/nl/winkel/209/switch-lier.html" title="Switch Lier">Switch Lier</a>
									</li>
</ul>
<p>											<li ><br />
							<a href="/nl/service.html" title="Service">Service</a></p>
<ul>
<li>
										<a href="/nl/service/210/switch-service.html" title="Switch hersteldienst">Switch hersteldienst</a>
									</li>
<li>
										<a href="/nl/applecare.html" title="AppleCare">AppleCare</a>
									</li>
<li>
										<a href="/nl/faq.html" title="FAQ">FAQ</a>
									</li>
<li>
										<a href="/nl/handige-links.html" title="Handige links">Handige links</a>
									</li>
<li>
										<a href="/nl/pagina/195-214/workshops.html" title="Workshops">Workshops</a>
									</li>
<li>
										<a href="/nl/1-op-1-advies.html" title="1-op-1 advies">1-op-1 advies</a>
									</li>
<li>
										<a href="/nl/pagina/195-133/servicevoorwaarden.html" title="Servicevoorwaarden">Servicevoorwaarden</a>
									</li>
</ul>
<p>											<li ><br />
							<a href="/nl/workshops.html" title="Workshops">Workshops</a></p>
<ul>
<li>
										<a href="/nl/workshops/mac-workshops-voor-beginners.html" title="Mac workshops voor beginners">Mac workshops voor beginners</a>
									</li>
<li>
										<a href="/nl/workshops/mac-workshops-voor-gevorderden.html" title="Mac workshops voor gevorderden">Mac workshops voor gevorderden</a>
									</li>
<li>
										<a href="/nl/workshops/zoeken-op-datum.html" title="Zoeken op datum">Zoeken op datum</a>
									</li>
<li>
										<a href="/nl/workshops/zoeken-op-locatie.html" title="Zoeken op locatie">Zoeken op locatie</a>
									</li>
<li>
										<a href="/nl/1-op-1-advies.html" title="1-op-1 advies">1-op-1 advies</a>
									</li>
</ul>
<p>											<li ><br />
							<a href="/nl/switch-id.html" title="Switch ID">Switch ID</a></p>
<ul>
<li>
										<a href="/nl/switch-id.html" title="Wat is de Switch ID?">Wat is de Switch ID?</a>
									</li>
<li>
										<a href="/nl/login.html" title="Login Switch ID">Login Switch ID</a>
									</li>
<li>
										<a href="/nl/1-op-1-advies.html" title="1-op-1 advies">1-op-1 advies</a>
									</li>
</ul>
<p>											<li ><br />
							<a href="/nl/contact.html" title="Contact">Contact</a></p>
<p>

[Bijdrager bedhead]

Ok, maar daar zit toch een soort CSS achter? Ik bedoel, met zo een pijltje omhoog als je daarop staat, als je over een item gaat, dan groen en zo. Bestaat dat nergens?

[Bijdrager DudeJoris]

Natuurlijk. Je moet de CSS bestanden even openen. Dan kijken in de html wat voor een DIV gekoppeld is aan die menubalk, en dan puntje voor puntje uitzoeken. Heb ik ook vaker gedaan, duurt even, maar uiteindelijk kan je wel alles te weten komen.

[Bijdrager bedhead]

Hmmm hoe kan je aan die css geraken? Ik heb trouwens de indruk dat ik dit al eerder gezien heb in een of ander WordPress theme…

[Inactief Anoniem]

In Safari: View -> View Source, en dan kijken wat het pad en naam van de css file is. Die kun je dan openen door dat achter de url te plakken. Dus bv switch.be/styles/mystyle.css

[Bijdrager App-ie]

Los van deze topic: Het logo ‘Switch’ in bovengenoemde link leest als swotch of zelfs swiotch.
Bij zo’n winkel zou ik niet kopen. Iemand die mac representeert moet een superlogo hebben. De mac is altijd al een computer voor grafici geweest, vandaar.

[Bijdrager chatsmit]

@app-ie haha hopelijk sarcasme anders :thumbsdown:

[Bijdrager Sidje]

Via het “Ontwikkel” menu van safari kun je css en andere broncode zoals html en javascript zien.

[Bijdrager MichMich]

En los daarvan: het menu is alles behalve spannend of bijzonder gemaakt. #justmytwocents

[Bijdrager macpro]

@App-pie: tijd om eens wat in de geschiedenis van Apple te duiken. De Mac is nooit alleen maar een computer voor grafici geweest. Dat is een volkomen onterecht beeld dat iedereen heeft en maar wil blijven gebruiken.

[Bijdrager App-ie]

@mac pro: Klopt wat je zegt. Ik bedoelde eigenlijk te zeggen dat voor grafici de mac nummer 1 was/is.
Toen ik met DTP’en begon kwam je automatisch bij de mac uit en quarkXpress en als je solliciteerde bij een reclamebureau, werd mac ervaring gevraagd.

[Bijdrager MouseMighty]

*kuch* het heette toen ook al QuarkXPress *kuch* Mag hopen dat je dan nu met InDesign werkt…