Dies könnte eine dumme Frage sein, aber ich kann nicht scheinen, eine Lösung zu finden.Erstellen von 2 verschiedenen Links je nach Bildschirmgröße
Ich erstelle eine Website, die auch mobil freundlich ist, benutze Bootstrap und Laravel.
Es hat ein Menü mit einer Dropdown-Liste namens "Produkte". Wenn Sie den Mauszeiger darüber bewegen, wird das Dropdown-Menü angezeigt und das Menü "Produkte" kann angeklickt werden und Sie gelangen auf eine Seite mit allen Produktkategorien.
Damit ich den Hover verwenden kann, habe ich data-toggle="dropdown" aus dem Dropdown entfernt und eine Hover-Funktion in meiner JS-Datei erstellt. Die data-toggle="dropdown" ermöglicht mir, auf "Produkte" zu klicken, ohne auf die Produktseite gehen zu müssen.
Jetzt ist das Problem, das ich habe, wenn ich zum Handy gehe und ich auf "Produkte" drücke, gehe ich auf die Produktseite statt des Dropdown-Displays.
Ich dachte an etwas wie das zu tun oder data-toggle="dropdown" über jquery zu der Verbindung abhängig von der Fenstergröße hinzuzufügen.
@if(window = 700px)
<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">
@else
<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
@endif
Offensichtlich funktioniert das nicht, also würde ich gerne wissen, wie ich in der Lage wäre, so etwas zu tun. Ich habe im Internet nachgeschaut und bin auf nichts gestoßen. Bezüglich der Frage nach jQuery bin ich mir nicht sicher, wie ich die data-toggle="dropdown" hinzufügen würde, wenn das Fenster die 700px Marke erreicht.
Mein Menü
<nav class="navbar navbar-default main_menu_wrapper">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#main_menu" aria-expanded="false">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a href="{!! url('/') !!}" class="navbar-brand">
<img src="{!! asset("img/logo.jpg") !!}">
</a>
</div>
<div class="collapse navbar-collapse menu_wrapper" id="main_menu">
<form action="{!! route('search') !!}" method="POST" role="search" class="navbar-form navbar-right search">
{{ csrf_field() }}
<div class="form-group">
<input type="text" class="form-control" name="search" placeholder="Search...">
</div>
<button type="submit" class="btn btn-default">
<span class="glyphicon glyphicon-search"></span>
</button>
</form>
<ul class="nav navbar-nav navbar-right">
@foreach($menus_child as $grandfather)
@if($grandfather->menu_id)
<li>
@elseif($grandfather->title == 'Home')
<li class="parent {!! menu_active($grandfather->id) !!}">
@elseif(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
<li class="dropdown {!! menu_active($grandfather->id) !!}">
@else
<li class="parent {!! menu_active($grandfather->id) !!}">
@endif
@if(count($grandfather->menusP()->where('menu_id', '>', 0)->get()))
<a href="{!! url(getSeoLink($grandfather->id)) !!}" class="dropdown-toggle" role="button" aria-haspopup="true" aria-expanded="false">
{!! $grandfather->title !!} <span class="caret"></span>
</a>
@else
{!! Html::link(getSeoLink($grandfather->id), $grandfather->title) !!}
@endif
@if(count($grandfather->menusP))
<ul class="dropdown-menu">
@foreach($grandfather->menusP as $father)
@if($father->menu_id)
<li class="parent_child">
@else
<li>
@endif
{!! Html::link(getSeoLink($father->id), $father->title) !!}
@endforeach
</ul>
@endif
@endforeach
</ul>
</div>
</div>
</nav>
meine js, die eine Hover
$('ul.navbar-nav li').hover(
function() {
$(this).find('> ul').show();
},
function() {
$(this).find('> ul').hide();
}
);
Ich hoffe, ich machte Sinn erlaubt. Wenn es noch etwas gibt, das ich vergessen habe hinzuzufügen, lass es mich wissen.