Hulp met Responsive Navbar met optie Hover (auto uitklapbare menu)

Status
Niet open voor verdere reacties.

shahied2015

Gebruiker
Lid geworden
9 dec 2015
Berichten
23
Beste Leden,

Ik loop tegen een probleem aan betreft mijn bestaande menu bar.

Ik heb de bootstrap/responsive menu gemaakt en waar ik tegen aan loop is nu het volgende.

Wanneer ik met de muis over de menu knoppen ga, wil ik graag dat dit automatisch uitklap, nu moet ik er specifiek op klikken voor het uitklappen en inklappen.

Ik las online over de optie (hover) kan het ook mis hebben, maar ik hoop dat jullie mij hier mee kunnen helpen.

Daarnaast weet ik eigenlijk niet hoe dit op de smartphone/tablets eruit gaat zien, volgens mij moet er specifiek op geklikt worden om het menu uit te klappen.
Maar op PC/laptop zou ik dit automatisch in/uitklapbaar willen hebben.

Zie mijn bijlage met de script.

Heel erg bedankt voor jullie Support, word zeker gewaardeerd.
 

Bijlagen

Laatst bewerkt:
Als eerste... dit kan niet omdat de browser touchscreen support kan hebben terwijl er fysiek geen touchscreen aanwezig is. Hierdoor krijg je dus de verkeerde informatie van de browser. Dat gezegd hebbende is er een gulden middenweg die in de meeste gevallen gewoon goed werkt. Dit kan op de volgende manier
Code:
<!-- jquery -->
<script src="jquery.min.js"></script>
<!-- bootstrap -->
<script src="bootstrap.min.js"></script>
<!-- bootstrap hover -->
<script src="bootstrap-hover-dropdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $(".dropdown-toggle").dropdownHover({
      hoverDelay: 100, // tijd voor hover in msec
      delay: 500 // tijd na hover in msec
   });
});
</script>
Bestand "bootstrap-hover-dropdown.min.js" kun je downloaden op GitHub
https://github.com/CWSpear/bootstrap-hover-dropdown

Wat als de browser zegt dat het touchscreen support heeft terwijl er fysiek geen touchscreen aanwezig is? In dat geval werkt het op de maier zoals je het nu hebt werken, d.w.z. met een click het submenu openen.

Noot: de plugin "bootstrap-hover-dropdown" werkt alleen als je class="dropdown-toggle" data-toggle="dropdown" gebruikt.

Suc6. Have fun.


*** aanvulling
Er is ook een css oplossing maar dan gebruik je de aanname dat een browser van minimaal 992 pixels nooit een touchscreen kan hebben (wat zeker niet future proof is).
Code:
@media (min-width: 992px) {
   .navbar-nav li:hover > .dropdown-menu {
      display: block;
   }
}
 
Laatst bewerkt:
Hey kerel,

Dank je wel voor je duidelijke uitleg!

Ik ben verder gaan kijken, maar heb deze stappen al gedaan.

Wat ik heb staan is dus, zoals je kon zien in de navbar.txt ( bijlage.
Tevens heb ik onderstaande script al staan.

Voor jou uitleg, wat ik gedaan heb.

in mijn index file heb ik het het volgende staan :

<!-- Bootstrap core JavaScript -->
<?php include ('text/js_links.txt'); ?>

In het mapje text heb ik een txt document js.links.txt gemaakt hierin zijn de volgende verwijzingen.

<script src="/path/to/jquery.min.js"></script>
<script src="/path/to/bootstrap.min.js"></script>
<script src="/path/to/bootstrap-hover-dropdown.min.js"></script>


Ik snap niet hellemaal goed, wat er nu foutgaat.
Maar dit heeft met mijn kennis te maken.

Hopelijk kun jij zien wat er niet goed is...

Nogmaals bedankt kerel!
 
Uit het volgende begrijp ik dat je een mapje "text" hebt waar je het menu in "js_links.txt" hebt gezet.
Code:
<!-- Bootstrap core JavaScript -->
<?php include ('text/js_links.txt'); ?>
Maak in de map waar index staat een nieuwe map met de naam "scripts". Verplaats de bestanden jquery.min.js , bootstrap.min.js , bootstrap-hover-dropdown.min.js naar map scripts.

Het volgende zet je direct boven </body> (bijna onderaan dus)
Code:
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/bootstrap-hover-dropdown.min.js"></script>

Suc6. Have fun.
 
Laatst bewerkt:
duidelijk kerel, heel erg bedankt!

1 vraag nog.

script :

<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/bootstrap-hover-dropdown.min.js"></script>

bovenstaande script moet ik dit in mijn index file plaatsen ?

Thx kerel!
 
Laatst bewerkt:
Deze 3 regels komen inderdaad in je index file.
Je index file eindigt onderaan dus met
Code:
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap.min.js"></script>
<script src="scripts/bootstrap-hover-dropdown.min.js"></script>
</body>
</html>

De reden dat de script regels onderaan staan is dat de pagina dan sneller wordt weergegeven.

De bootstrap css komt uiteraard ergens tussen <head> en </head>
Code:
<link rel="stylesheet" href="bootstrap.min.css">
 
Laatst bewerkt:
Hallo,

Ik heb zoals aangegeven de stappen doorgenomen en doorgevoerd.
Hover menu werkt nog steeds niet.

Wat ik mij even afvraag, waar zou ik onderstaande script moeten plaatsen, misschien dat dit fout gaat...

<!-- jquery -->
<script src="jquery.min.js"></script>
<!-- bootstrap -->
<script src="bootstrap.min.js"></script>
<!-- bootstrap hover -->
<script src="bootstrap-hover-dropdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$(".dropdown-toggle").dropdownHover({
hoverDelay: 100, // tijd voor hover in msec
delay: 500 // tijd na hover in msec
});
});
</script>
 
Als je alle script-bestanden in mapje met naam scripts hebt staan
Code:
<!-- jquery -->
<script src="[COLOR="#FF0000"]scripts[/COLOR]/jquery.min.js"></script>
<!-- bootstrap -->
<script src="[COLOR="#FF0000"][/COLOR][COLOR="#FF0000"]scripts[/COLOR]/bootstrap.min.js"></script>
<!-- bootstrap hover -->
<script src="[COLOR="#FF0000"][/COLOR][COLOR="#FF0000"]scripts[/COLOR]/bootstrap-hover-dropdown.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
   $(".dropdown-toggle").dropdownHover({
      hoverDelay: 100,
      delay: 500
   });
});
</script>

edit: zorg ervoor dat dezelfde script regels niet dubbel in je index file staan.
 
Laatst bewerkt:
Kerel!

Het werkt zoals ik het wilde!
Ik ben je zeer dankbaar!

Ik zal alleen de delay settings nog aanpassen, kijken welke voor mij goed is.

Heel erg bedankt voor jou tijd en duidelijke uitleg kerel!

Ik heb nog 2 specifieke dingen maar zal hiervoor een nieuwe post plaatsen.

1 = wil nieuwsfeed toevoegen op de website, met een auto scroll (venster) zag ook dat sommige websites de nieuwsfeed in een window hebben met per nieuwsfeed een kleine foto erachter.

2 = wil een prof banner, weet alleen nog niet hoe, wel responsive. Weet eigenlijk niet hoe en waarmee ik dit kan maken. Bewegende tekst / afbeeldingen, maar of dat prof.. is, dat weet ik eigenlijk niet.

Nogmaals bedankt voor al je hulp!
 
shahied, graag gedaan! Succes met je volgende uitdaging :thumb:
 
Hey kerel,

Ik ben wat issues tegengekomen,

Wanneer ik op de mainpage ben dan werkt de hover menu prima, dit is via mijn laptop.
Via mijn laptop werkt het menu prima, maar wanneer het menu is uitgeklapt, dan klik ik op 1 van de diensten als voorbeeld, dan gaat de pagina open, maar wanneer ik dan met mijn muis over het menu ga om bijv een andere dienst te selecteren, dan werkt de hover menu niet. ik moet dan echt weer naar de mainpage, dan werkt het wel.

Wanneer ik via mijn mobiel ( hover menu aan klik dan gaat het menu niet open) met alle diensten.
 
Alleen op pagina's waar de <script> regels staan zal het werken.
In de bijlage een voorbeeld.

Gecombineerd hover/touch is alleen onhandig voor mensen die op een pc de mouse-over (hover) en mouse-click (als een tap op touchscreen) door elkaar heen gebruiken. Je kunt dit zien door op Service te klikken. Dan gaat door de hover het menu open en door de klik sluit je het weer.

Tja, zoals ik bij #2 al aangaf... het is theoretisch niet mogelijk om mouse hover en touch door elkaar heen te gebruiken. Het enige wat je kunt doen is het zo goed mogelijk benaderen.
 

Bijlagen

Laatst bewerkt:
Nu met nog een kleine aanpassing en op verschillende platformen getest.

En ben bijzonder blij met resultaat!

Heel erg bedankt voor jou support!

Nu op naar de volgende actie op mijn lijst.

Fijne avond kerel.
 
Hoi,

Ik had nog een vraag betreft de dropdown menu.
Alle services in de dropdownmenu zou ik willen scheiden met een horizontale lijn.

Ik heb de <hr> tag geprobeerd als divider, maar dit is niet niet voor responsive... ziet er niet uit...
Enige andere oplossing mogelijk ?

Thanks!
 
Dit is in Bootstrap de "divider" class, voorbeeld:
Code:
<li><a href="service1.php"><span class="glyphicon glyphicon-chevron-right"></span> Service 1</a></li>
<li class="divider"></li>
<li><a href="service2.php"><span class="glyphicon glyphicon-chevron-right"></span> Service 2</a></li>


scheiden met een horizontale lijn
Hiermee kan je ook bedoelen de randkleur (border-color) van ieder item. Laat maar weten of je dit bedoelt.

Suc6. Have fun.
 
Laatst bewerkt:
Dit is zeker wat ik bedoel.

Wanneer ik de code invoer <li class="divider"></li> invoer is dit via de pc/laptop browser perfect!
Maar via de smartphone, zie ik een zwarte balk, i.p.v een lijn, tussen de services. Mogelijk kan ik dit nog ergens aanpassen ?
Kan ik ook de kleur van de horizontale lijn wijzigen ?

Thx kerel.
 
Zo kun je de kleur aanpassen (volgorde zo laten)

Code:
/* divider voor tablet,pc */
.dropdown-menu .divider {
  background-color: #e5e5e5;
}
/* divider voor smatphone */
@media (max-width: 767px) {
  .navbar-default .navbar-nav .open .dropdown-menu .divider,
  .navbar-inverse .navbar-nav .open .dropdown-menu .divider {
    background-color: #959595;
  }
}

Have fun.
 
thanks, ga hier vanavond mee aan de slag...

misschien een domme vraag maar dit plaats ik in de stylesheet toch?

en zagin je script staan smatphone, is smartphone toch?

nogmaals bedankt!
 
Een vraag stellen is juist niet dom :) Ja, de css in de stylesheet zetten. Tikfoutje smartPhone.


Vraagje aan allen
Wie kan mij uitleggen waarom het woord "Phone" een hoofdletter krijgt terwijl ik het toch echt met een kleine letter typ???
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Terug
Bovenaan Onderaan