13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)
  • Q:
    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:wink: *kuch* Mag hopen dat je dan nu met InDesign werkt…

13 berichten aan het bekijken - 1 tot 13 (van in totaal 13)

Je moet ingelogd zijn om een reactie op dit onderwerp te kunnen geven.