Dit is een topic in Community » Forum » Pro » Web ontwikkeling

Hoe is deze menubalk gemaakt? PRACHTIG!

bedhead

bedhead op 07 augustus 2011 #

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

Meh1965

Meh1965 op 07 augustus 2011 #

Zie hier de code:

<li >
<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 >
<a href="/nl/nieuwscategorie/17/promoties.html" title="Promoties">Promoties</a></p><p> <li >
<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 >
<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 >
<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 >
<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 >
<a href="/nl/contact.html" title="Contact">Contact</a></p><p>

bedhead

bedhead op 07 augustus 2011 #

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?

DudeJoris op 07 augustus 2011 #

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.

bedhead

bedhead op 07 augustus 2011 #

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...

koen

koen op 07 augustus 2011 #

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

App-ie

App-ie op 07 augustus 2011 #

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.

chatsmit

chatsmit op 07 augustus 2011 #

@app-ie haha hopelijk sarcasme anders

Sidje op 07 augustus 2011 #

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

MichMich

MichMich op 07 augustus 2011 #

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

macpro

macpro op 07 augustus 2011 #

@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.

App-ie

App-ie op 07 augustus 2011 #

@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.

MouseMighty

MouseMighty op 07 augustus 2011 #

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

Je kunt alleen reageren met een gratis OMT account.
Log in of registreer.

Inloggen

Over dit topic

Gestart op 07 augustus 2011 door bedhead

Laatste reactie door MouseMighty

Reageer op dit topic