Jump to content

Dropdown menu

Geplaatst:
comment_1971311

Ik wil op mijn blog een dropdown menu hebben waarmee je, als je op een optie klikt, een stuk tekst verschijnt (bijvoorbeeld als je op een pagina over computers op 'Processor' klikt, dat je dan een stuk tekst krijgt over in dit geval dus de processor). Ik wil het gebruiken voor een portfolio op mijn blog, zonder dat mensen naar een andere site moeten m.b.v. links.

Is dat mogelijk met HTML / CSS / javascript? Ik heb al Gegoogled, maar dan krijg je alleen van die dropdown menu's voor bovenin, als navigatiemenu. En ik wil het op een specifieke pagina hebben, zonder dat er een link naar bepaalde informatie nodig hebt. Je moet op één pagina kunnen blijven. :puh:

Ik heb even een voorbeeldje gepakt van een site die heel nieuw is:

In de afbeelding zie je, op de plek waar een stuk tekst uitgeklapt is, aan de rechterkant bij de naam een '-' staan. Bij de opties die gewoon dicht zijn, staat een '+'.

Bewerkt: door Grand Theft Auto TOM

  • Reageren

    • Featured Replies

    Geplaatst:
    comment_1971362

    Een soort van concept is mogelijk in CSS, maar om de functionaliteiten zoals bijvoorbeeld de "+" en "-" symbolen te laten zien / toggle click zit je als nog aan Javascript vast.

    Ik heb twee concepten voor je gerealiseerd:

    1. Gebruik makend van een CSS3 transition : http://jsfiddle.net/maikeldus/qsfgY/
    2. Gebruik makend van de jQuery slide: http://jsfiddle.net/maikeldus/fsJw3/

    Ik weet niet of je een beetje bekend met JS / HTML of CSS bent, want ik kan ook een kalere versie van het concept geven zodat het wat overzichtelijker is (zonder opmaak / effecten etc).

    In het concept maak ik trouwens gebruik van jQuery, maar ik denk wel dat je hier bekend mee bent.

    Edit:

    De CSS3 transition werkt op het moment alleen correct in Chrome (ivm met het trigger event).

    De jQuery slide methode is browser compatible, dus een veilige optie.

    Bewerkt: door Maikle

  • Reageren
    • Geplaatst:
    • Auteur
    comment_1971369

    Een soort van concept is mogelijk in CSS, maar om de functionaliteiten zoals bijvoorbeeld de "+" en "-" symbolen te laten zien / toggle click zit je als nog aan Javascript vast.

    Ik heb twee concepten voor je gerealiseerd:

    1. Gebruik makend van een CSS3 transition : http://jsfiddle.net/maikeldus/qsfgY/
    2. Gebruik makend van de jQuery slide: http://jsfiddle.net/maikeldus/fsJw3/

    Ik weet niet of je een beetje bekend met JS / HTML of CSS bent, want ik kan ook een kalere versie van het concept geven zodat het wat overzichtelijker is (zonder opmaak / effecten etc).

    In het concept maak ik trouwens gebruik van jQuery, maar ik denk wel dat je hier bekend mee bent.

    Edit:

    De CSS3 transition werkt op het moment alleen correct in Chrome (ivm met het trigger event).

    De jQuery slide methode is browser compatible, dus een veilige optie.

    Ik ben juist meer bekend met HTML en CSS bekend dan met JQuery. :puh:

    Maar wat moet ik precies doen met die code? Want het staat nu in 3 losse stukken, dus ik weet eerlijk gezegd niet zo hoe ik deze goed moet plaatsen dat het werkt. :puh:

    EDIT: Laat maar, met 'Paginabron weergeven' in Chrome heb ik de code al over kunnen nemen. :puh:

    In ieder geval bedankt, hé. :)

    Bewerkt: door Grand Theft Auto TOM

  • Reageren
    • Geplaatst:
    comment_1971373

    JSFiddle is eigenlijk niets meer dan een browser applicatie om kleine stukjes front end code te testen en delen.

    Als je het heel netjes wil oplossen kan je het beste het volgende doen:

    Gebruik jQuery van google CDN

    Om jQuery te gebruiken op je website moet je eerst de library in je <head> tag van je website zetten:

    <script type='text/javascript' src='//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.js'></script>

    Technisch is het ook mogelijk deze helemaal onderin de <body> tag te zetten zodat de gebruiker sneller resultaat op zijn scherm ziet. Het feit dat je de jQuery van Google gebruikt heeft als

    voordeel dat deze vaak al door de client gecached is, omdat veel grote websites ook de CDN van Google gebruiken.

    Houd je CSS apart van je HTML

    Dit is puur voor onderhoudbaarheid van je code. Als je een inline style code van 800 regels hebt krijg je moeite om telkens makkelijk te kunnen wisselen tussen HTML en CSS.

    Voor een extern CSS bestand kan je ook gewoon een tag in de <head> zetten:

    <link rel="stylesheet" type="text/css" href="/style.css">

    Met deze code verwijs je dus altijd naar domein.com/style.css. In style.css zet je dus alle CSS regels, en met deze <link> tag vertel je de browser: hier staat mijn CSS opmaak.

    Houd je Javascript apart van je HTML

    Zelfde verhaal, puur voor onderhoudbaarheid. Door structuur in je website/applicatie te houden is het makkelijker te begrijpen voor jezelf en anderen.

    <script type='text/javascript' src='/javascript.js'></script>

    Hierbij verwijs je dus naar domein.com/javascript.js. Hierin zet je dus alle zelfgemaakte code (bij mijn Fiddle dus het gedeelte wat je links onderin ziet).

  • Reageren
    • Geplaatst:
    • Auteur
    comment_1971377

    Het werkt allemaal prima bij mij, heb ik al gemerkt. Ik heb hem gewoon op een pagina op een blog van Blogger gebruikt, waar hij naar behoren werkt.

    Wel is het me opgevallen dat er boven het blok een heel stuk wit is.

    En de code heb ik gecontroleerd; daar lijkt niets mis mee te zijn.

    Bewerkt: door Grand Theft Auto TOM

  • Reageren
    • Geplaatst:
    comment_1971436

    Als je wil zien waardoor een visuele fout wordt veroorzaakt kan je het beste de Dev tools van Chrome gebruiken (aangezien je chrome gebruikt).

    Dit doe je door met "F12" het paneel te openen, klik op het vergrootglas icoontje onderin het scherm.

    Vervolgens kan je met je muis over het gedeelte gaan waarvan je vindt dat er iets fout gaat. Als je dan op het element hovert kan je de grootte / padding en margin zien van het element. Als je op het element klikt ga je in de DOM naar dat element toe en kan je hier wat mee testen.

    Ik kan natuurlijk van een plaatje niet zeggen wat er fout gaat :puh:

  • Reageren
    • Geplaatst:
    • Auteur
    comment_1971457

    In dat paneel wordt <br> vaak weergegeven in het eerste gedeelte 

    <div class="post-body entry-content" id="post-body-1172763245981591035" itemprop="description articleBody">
<br>
<br>
<title> - jsFiddle demo</title><br>
<script src="http://code.jquery.com/jquery-1.8.2.js" type="text/javascript"></script><br>
<link href="/css/normalize.css" rel="stylesheet" type="text/css"><br>
<link href="/css/result-light.css" rel="stylesheet" type="text/css"><br>

    Maar bij het bewerken van de code op de blog zie je dat allemaal niet staan... Als ik ze in het Dev Tools-paneel weghaal, is het gewoon zoals het hoort... Vreemd, zeg. :puh:

  • Reageren
    • Geplaatst:
    comment_1971486

    Waar komt die code nu vandaan?

    Het is namelijk niet HTML valide, <title> hoort namelijk in de <head> tag te staan.

    En de <br /> is een newline, dus ik denk dat Blogger dat zelf genereert en zal waarschijnlijk wel ergens uit te schakelen zijn?

  • Reageren
    • Geplaatst:
    • Auteur
    comment_1971495

    Ah, het was inderdaad ergens uit te schakelen; ik had de optie om, wanneer je op <Enter> drukt, er automatisch een regeleinde gegenereert wordt ingeschakeld. Ik moest '<br>-tag gebruiken' inschakelen. :puh:

    Het is trouwens wel HTML, maar Blogger maakt de tags zelf op de achtergrond aan. Dus je hoeft die zelf niet toe te voegen.

  • Reageren

    • Een reactie plaatsen

    Je kan nu een reactie plaatsen en pas achteraf registreren. Als je al lid bent, log eerst in om met je eigen account een reactie te plaatsen.

    Gast
    Op dit onderwerp reageren...
    Naar onderwerpenlijst

    Recent actief 0

    • Er zijn hier geen geregistreerde gebruikers aanwezig.