I am not quite sure if I can achieve what I have in mind with the MaterializeCSS Framework. But if it is possible I would like to see if someone can help me with it.
For information; I am working in laravel 5.6. Maybe that helps to find a solution a little quicker.
So; I have a menu with dropdowns. But in stead of dropdowns I just want to have tabs. As seen in the Extended Navbar with Tabs.
There are 2 things that would need changing.
The Tabs need to change upon a clicking on a menu item. I am not sure how and if this will and can work.
The Tabs need to redirect to a page upon click. And not load the internal (on page) content.
Is there any way I can achieve this?
Depending on how you would like to have your Blade templates, you have 2 options you could go for.
Option 1 would be to use a yield-section combo. This would allow you to define the tabs on the page where they need to be shown in the template itself:
<!-- /resources/path/to/view.blade.php -->
#section('nav-tabs')
<div class="nav-content">
<ul class="tabs tabs-transparent">
<li class="tab">Test 1</li>
<li class="tab"><a class="active" href="#test2">Test 2</a></li>
<li class="tab disabled">Disabled Tab</li>
<li class="tab">Test 4</li>
</ul>
</div>
#endsection
<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
<div class="nav-wrapper">
<!-- your nav bar -->
</div>
#yield('nav-tabs')
</nav>
Option 2 would be to use a new parameter coming from the controller. This then can be parsed in the template and will show tabs when you pass the data from the controller:
<!-- /resourcs/path/to/navbar.blade.php -->
<nav class="nav-extended">
<div class="nav-wrapper">
<!-- your nav bar -->
</div>
#isset($tabs)
<div class="nav-content">
<ul class="tabs tabs-transparent">
#foreach($tabs as $tab)
<li class="tab {{$tab['classes']}}">{{$tab['label']}}</li>
#endforeach
</ul>
</div>
#endisset
</nav>
// PageController#action
...
return view("blade/template", [
'tabs' => [
[
'title' => 'Tab title',
'href' => '/go/to/this/page',
'classes' => '', // Add additional classes to tabs if you need them
],
...
]
])
As for the external page point, since the tabs are filled with <a href=''></a> elements, can you not use those to link to the other pages?
Related
I'm experimenting around with dust.js and am wondering about the most efficient way to solve this:
I have a simple template structure with 2 levels of navigation and content.
The first level of navigation is static - while the second level (the subnavigation) changes with each change in the primary navigation.
Parent Template:
<nav class="navbar navbar-fixed-top navbar-dark">
<div class="container">
{>"navigation/navigation_primary"/}
{>"navigation/navigation_secondary"/}
</div>
</nav>
<div class="container"></div>
Primary Navigation Template:
<div class="navbar-container navbar-primary">
<ul class="nav navbar-nav">
{#navigation_primary}
<li class="nav-item">
<a class="nav-link" href="#{slug}">{label}</a>
</li>
{/navigation_primary}
</ul>
</div>
Secondary Navigation Template:
<div class="navbar-container navbar-secondary">
<ul class="nav navbar-nav">
{#navigation_secondary}
<li class="nav-item">
<a class="nav-link" href="#{slug}">{label}</a>
</li>
{/navigation_secondary}
</ul>
</div>
Now, my problem is this: Without reloading the page, I'ld like to update the "secondary navigation", when I click on the primary navigation elements.
The way I'ld do this, is to re-render the "Secondary Navigation Template" and then replace the old ".navbar-secondary" with the newly rendered template ( with jQuery.html() ) - but I was wondering if dust.js has it's own feature for this, since it's able to load partials asynchroneusly?
To be honest, I didn't find most of the dust.js documentation very informative, so I'm having a hard time figuring the details out.
Is there a better way to update only a partial and leaving the rest of the template untouched, without using something like jQuery.html() and replace the partial in dust.js?
I have such HTML:
<div class="parrent pull-left">
<ul class="nav nav-tabs nav-stacked">
<li class="active">TAB1</li>
<li class="">TAB2</li>
<li class="">TAB3</li>
</ul>
</div>
This is navigation for tabs. But it behaves something different: when I click on the link (for example: TAB1) - required tab is displayed. But there is not the anchor in url(#tab1 or #tab2 or #tab3). But I need it...
I am some new in fronted and I use ready template. So there are such frameworks:
jquery.js, bootstrap.min.js, js/jquery.isotope.min.js
What should I do??
Maybe it's related to this question and this (if you are using bootstrap for tabs managing).
I've been trying to make a responsive website, most of it is sorted but I'm having difficulty with making the menu button (that shows up on devices specified by the media query) show and hide the navigation bar.
After researching it seems the only method is via JS, is this correct?
Anyway, I'm pretty awful when it comes to JS but I put it as I believed it would work. Here is the snippet of code. So the idea is, when ".menu-icon" is clicked the menu will drop down (or in this case fade in) and revert to hidden upon a second click etc.
http://jsfiddle.net/af57r1to/
<div id="logo">
<a href="#">
<img class="logo" src="images/logo.png" alt="Logo" style="width:200px;height:100px" />
</a>
<a class="menu-icon" href="#menu"></a>
<br></br>
</div>
<div class="navbar">
<ul class="navbar cf">
<li>HOME
</li>
<li>SECTIONS
<ul>
<li>RETAIL
</li>
<li>HOTEL
</li>
<li>RESTAURANT
</li>
<li>SHOPPING
</li>
</ul>
<li>HOW IT WORKS
</li>
<li>OUR EXPERIENCE
</li>
<li>TESTIMONIALS
</li>
<li>NEWS
</li>
<li>CONTACT US
</li>
</ul>
</div>
<br />
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
As this is at the moment, it seems to fade the navigation in for approximately 0.3seconds and then disappears. Not giving the user much time to choose an option from the drop down! aha.
I know it will be something obvious I've missed. Any help regarding it would be grateful.
Removing the class navbar from navbar cf solves the toggle issue, but screws up the styling. So, give an id to your navbar and toggle on that.
<div class="navbar" id='navbarID'>
<ul class="navbar cf">
<li>HOME
and
$('.menu-icon').click(function () {
$('#navbarID').fadeToggle();
});
Here is the fiddle
You have some errors in both HTML & JS.
First: You opened the inner <ul> element in a <li> element but closed it outside of the li element. The structure is wrong. It must closed inside the <li> element where it opened.
Second: The $(document).ready() function is not closed properly:
$(document).ready(function () {
$('.menu-icon').click(function () {
$('.navbar').fadeToggle();
});
});
I am applying bootstrap tab to my web page. The challenge here is that I have tabs on top and bottom of the tab content.
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-top">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
<!-- Tab panes -->
<div class="tab-content">
<div class="tab-pane active" id="home">...</div>
<div class="tab-pane" id="profile">...</div>
<div class="tab-pane" id="messages">...</div>
<div class="tab-pane" id="settings">...</div>
</div>
<!-- Nav tabs -->
<ul class="nav nav-tabs nav-tabs-bottom">
<li class="active">Home</li>
<li>Profile</li>
<li>Messages</li>
<li>Settings</li>
</ul>
I want the bottom tabs to change accordingly when I click on the top once and visa-versa.
The tab content is changing but the two tabs - top and bottom need to change in tandom i.e when i click on "Profile" on top - it needs to make "Profile" in bottom active
I have tried searching for some solutions using data-target but with no success. I am guessing that javascript or jquery might be needed.
Any suggestion or tips will be appreciated.
Thanks
Try this:
$('.nav-tabs-top a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-bottom li.active').removeClass('active')
$('.nav-tabs-bottom a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
$('.nav-tabs-bottom a[data-toggle="tab"]').on('click', function(){
$('.nav-tabs-top li.active').removeClass('active')
$('.nav-tabs-top a[href="'+$(this).attr('href')+'"]').parent().addClass('active');
})
Result here
Code here
Here's a version that works in Bootstrap 4 (the class "active" is applied to the <a> element, not the <li> element). This version also automatically creates the bottom tabs for you: https://gist.github.com/epicfaace/fa31d5133d3dd89b7f0caf72ebba5af9
If you have some Javascript experience I'd appreciate some help.
I'm having an issue trying top create a tabbed menu that looks like the one referenced in the screenshot below.
Basically, because I need to include a full width horizontal line below the heading tab, I am unable to get the first tab to remove it's active styling once one of the other tabs is removed.
So my question is: how can I separate the first tab from the others with a full length without creating two different menus.
BTW, I am aware this is a confusing explanation and understand that I am probably doing this completely wrong, but that's why I am looking for your help :)
Here is how I am trying to do this so far:
<script>
$(document).ready(function() {
/* Tabs Activiation
================================================== */
var tabs = $('.tabs');
tabs.each(function(i) {
//Get all tabs
var tab = $(this).find('> a');
tab.click(function(e) {
//Get Location of tab's content
var contentLocation = $(this).attr('href');
//Let go if not a hashed one
if(contentLocation.charAt(0)=="#") {
e.preventDefault();
//Make Tab Active
tab.removeClass('active');
$(this).addClass('active');
//Show Tab Content & add active class
$(contentLocation).show().addClass('active').siblings().hide().removeClass('active');
}
});
});
});
</script>
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<h1 class="tabs">
<a class="active" href="#tab1">Tab 1 (H1)</a>
</h1>
</nav>
<hr />
<!-- Tabs -->
<nav id="tab-nav" class="grid3">
<div class="tabs">
Tab 2
Tab 3
</div>
</nav>
<!-- Tab Content -->
<ul class="tabs-content grid6">
<li class="active" id="tab1">Tab 1 Content</li>
<li id="tab2">Tab 4 Content</li>
<li id="tab3">Tab3 Content</li>
</ul>
So I made a working model... uses jQuery but not hash tags
http://jsfiddle.net/nenvG/31/
I think it's easier to add content to, wouldn't need to rearrange the html for each of the elements.