Ga naar inhoud

Menu & Css


Robinho

Aanbevolen berichten

Heeuu

Ik heb 2 vragen, ik ben nu bezig om een site te maken, een soort spel, nu wil ik nog een uitklap menu! weten jullie nog een site waar allemaal uitklaps menu's zijn te vinden maar ze moeten we gratis zijn. En de 2de vraag is weten jullie hoe je van die afgeronden hoeken moet maken ik heb geen flauw idee hoe dat moet! (op jullie site hebben jullie ook van die afgeronden hoeken), maar hoe doen jullie dat????

Weten jullie nog sites of handleidingen stuur ze dan!!:)

Link naar reactie
Delen op andere sites

kijk eens rond op W3Schools Online Web Tutorials

is wel in het engels, maar vind je zeer veel tutorials.

je kan het ook altijd test.

Zoals dit: Tryit Editor v1.4

dat is een dropdown menu.

Dat staat nu op 'onmouseover', maar als je 'onmouseclick' neemt, kan je zo wel wat maken.

Maar kijk eens verder op die site, dan vind je nog wel wat meer in de richten zoals je zelf wil.

edit: en dat van die afgeronde hoeken ga je ook zeker op die site vinden. Ben het zelf al eens tegengekomen, maar ik weet het niet vanbuiten.

Link naar reactie
Delen op andere sites

je kunt het programma allwebmenus pro downloaden en gebruiken.

maar je kunt het ook zelf schrijven met JQuery

Je moet dan eerst de "bibliotheek" van JQuery downloaden (jQuery: The Write Less, Do More, JavaScript Library)

je moet dan het gedownloade bestandje importeren in je pagina waar het menu in moet komen met javascript zo:

<html>
<head>
<script language="javascript" type="text/javascript" href="bron-van-bibliotheek.js"></script>
</head>
<body>
</body>
</html>

Dan moet je tussen je head tags een stukje javascript gaan programmeren, uitleg ervan hoe je dat moet doen kun je op de JQuery site vinden.

Ik geef 1 voorbeeldje:

<html>
<head>
<script language="javascript" type="text/javascript" href="bron-van-bibliotheek.js"></script>

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $("idinhoudDIVtag").hide();
    $("#idDIVtag").click(function() {
         $("#idinhoudDIVtag").slideToggle("fast");
    });
});

</script>

</head>
<body>
<div id="idDIVtag">Hoofditem</div>
<div id="idinhoudDIVtag" class="subitem">Subitem</div>
</body>
</html>

Als je dit importeerd in een html bestandje, en je zou op de tekst 'Hoofditem' drukken. Dan moet ONDER deze tekst 'Hoofditem' de tekst komen te staan: 'Subitem'

Op deze manier kun je dus je eigen menu's maken.

MAAR! zou je deze stap constant herhalen, dan zou je wanneer je op een ander hoofditem drukt de oude hoofditem niet sluiten, hiervoor moet je nog een stukje code invoegen. Dan krijg je dit: (alleen het scriptje!)

<script language="javascript" type="text/javascript">
$(document).ready(function() {
    $("idinhoudDIVtag").hide();
    $("#idDIVtag").click(function() {
         $(".subitem:visible").slideUp("fast");
         $("#idinhoudDIVtag").slideToggle("fast");
    });
});

</script>

Op deze manier sluit hij de andere subitem en opent hij tegelijkertijd de volgende. Je kunt dit nog zo instellen dat hij eerst de geopende subitem moet sluiten, en daarna pas de geklikte moet openen. Dan krijg je dit:

<script language="javascript" type="text/javascript">
$(document).ready(function() {
     $("idinhoudDIVtag").hide();
     $("#idDIVtag").click(function() {
         $(".subitem:visible").slideUp("fast" function() {
              $("#idinhoudDIVtag").slideToggle("fast");
         });
     });
});

</script>

Ik hoop dat het je lukt, anders moet je de website van JQeury maar even een beetje doorlezen, en voorbeelden bekijken. Dan zal het je waarschijnlijk wel lukken.

Groeten,

Leroy

Link naar reactie
Delen op andere sites

JQuery is een javascript bestand... dit moet je niet met windows openen... maar in je pagina laten "includeren". dit kan door het lijntje tekst te gebruiken wat ik je had gegeven.

Op de site van JQuery staat nog meer uitgelegd hierover.

Als je een .js (JavaScript) bestand opent in windows, en niet met een webdevelopmentprogramma. Dan krijg je inderdaad een foutmelding, maar dit komt omdat het geen programma is voor windows, maar voor te gebruiken in je website.

Link naar reactie
Delen op andere sites

×
×
  • Nieuwe aanmaken...

Belangrijke informatie

We hebben cookies geplaatst op je toestel om deze website voor jou beter te kunnen maken. Je kunt de cookie instellingen aanpassen, anders gaan we er van uit dat het goed is om verder te gaan.