I want to add a dropdown menu to one of my menus in the nav-bar but I can’t seem to do it. I dont know where to put the dropdown code to make it function and with the CSS included.
Here’s my header.inc.php code:
<header class="flex-shrink-0 flex-grow-0">
<!-- Navigation Bar -->
<nav class="navbar navbar-expand-lg navbar-dark bg-ewarz sticky-top h-100 p-0">
<section class="container-fluid">
<!-- Nav Brand Text -->
<a class="navbar-brand d-none d-lg-block" style="font-size: 24pt; -moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none; -o-user-select:none;" href="#">e<span style="color: #aa3232">W</span>arz</a>
<!-- Burgermenu Toggler -->
<button class="navbar-toggler ml-auto mr-2 collapsed" style="margin: 15px;" data-toggle="collapse" data-target="#navMenu" aria-expanded="false">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse bg-ewarz" id="navMenu">
<!-- Nav Links -->
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-account-multiple mr-2"></i>Crew</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-cart mr-2"></i>Shop</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-text-box-outline mr-2"></i>General<i class="mdi mdi-menu-down"></i></a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-information-outline mr-2"></i>About<i class="mdi mdi-menu-down"></i></a>
</li>
</ul>
</div>
<!-- Nav Icons -->
<section class="d-none d-lg-block d-lg-inline-flex">
<i class="icon mdi mdi-discord d-block mr-1"></i>
<i class="icon mdi mdi-steam d-block ml-1"></i>
</section>
</section>
</nav>
</header>
You can add again <ul><li> after <ul><li>.
You can use this for dropdown;
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home2</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home3</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home4</a>
</li>
</ul>
</li>
</ul>
Drop down menus in Navbar should be defined in this way.
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Heading
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
<a class="dropdown-item" href="#">Dropdown Item 1</a>
<a class="dropdown-item" href="#">Dropdown Item 2</a>
<a class="dropdown-item" href="#">Dropdown Item 3</a>
</div>
</li>
Sample code shown below:
<!-- Nav Links -->
<ul class="navbar-nav mx-auto">
<li class="nav-item mx-3">
<a class="nav-link" href="/"><i class="mdi mdi-home mr-2"></i>Home</a>
</li>
<li class="nav-item mx-3">
<a class="nav-link" href="#"><i class="mdi mdi-server mr-2"></i>Servers</a>
</li>
<!-- Add this block -->
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown Menu Text
</a>
<div class="dropdown-menu" aria-labelledby="navbarDropdown">
<a class="dropdown-item" href="#">Dropdown Item 1</a>
<a class="dropdown-item" href="#">Dropdown Item 2</a>
</div>
</li>
<!-- Add this block -->
</ul>
Refer this link for details
Related
I'm trying to 'include' a php file in a html template when a nav-item is selectd. The code below make active the item on click it. What I want to do is, at the same time it becomes active,load the php file with de same name than '$this' value is. I mean:
on click in tab 'two' ($this value), load in div '#contFl' the php file named 'two.php' at time its become 'active'; load 'one.php' on click in 'one' item;...
Tried a few ways of text estructure in 'load(...)' -last one on last code line- with no results. Pleasefull to have some help.
<script type="text/javascript">
$(document).ready(function(){
$("ul.navbar-nav > li").click(function(e){
$("ul.navbar-nav > li").removeClass("active");
$(this).addClass("active");
$("#contFl").load('"'+$(this).val()+'.php');
});
})
HTML code of navbar
<div id="collapsibleNavbar" class="collapse navbar-collapse justify-content-around">
<ul id="collUl" class="navbar-nav col-12 col-lg-auto me-lg-auto mb-1 mb-md-0">
<li class="nav-item nav-link active" id="uno" role="button"><i class="fa fa-home" aria-hidden="true"></i> Inicio</li>
<li class="nav-item nav-link" id="dos" role="button"><i class="fa fa-envelope" aria-hidden="true"></i> Dos</li>
<li class="nav-item dropdown" id="tres"><a class="nav-link dropdown-toggle px-2" href="#" role="button" data-bs-toggle="dropdown"><i class="fa fa-list" aria-hidden="true"></i> Tres</a>
<ul class="dropdown-menu">
<a class="dropdown-item" href="index.php"><i class="fa fa-home" aria-hidden="true"></i> Inicio</a>
<a class="dropdown-item" href="tres.php"><i class="fa fa-list" aria-hidden="true"></i> Tres</a>
<a class="dropdown-item" href="dos.php"><i class="fa fa-envelope" aria-hidden="true"></i> Dos</a>
<div class="dropdown-divider"></div>
<a class="dropdown-item" href="cuatro.php"><i class="fa fa-user" aria-hidden="true"></i> Cuatro</a>
</ul>
</li>
<li class="nav-item nav-link" id="cuatro" role="button"><i class="fa fa-user" aria-hidden="true"></i> Cuatro</li>
</ul>
Code in template where include new php file.
<?php
include(ASSETS."/navbar.php");
include(ASSETS."/banner.php")?>
<div id="contFl" class="container-fluid">
<!-- HERE THE NEW 'INCLUDE' -->
</div>
hope you are all doing well, i have just face a problem. i make my website online. everything working well expect navbar toggler icon. it is not working on mobile device. it is working well on desktop
here is my code
<nav class="navbar navbar-expand-md navbar-light bg-light sticky-top">
<div class="container-fluid">
<a class="navbar-brand" href="index.php"><img src="./assests/images/logo.png" class="logo ml-5" alt="file not found" /> </a>
<button class="navbar-toggler " type="button" role="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"> </span>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item <?php if($page == 'home') echo 'active' ?>">
<a class="nav-link " href="index.php"><i class="mr-2 fas fa-home"> </i>Home </a>
</li>
<li class="nav-item <?php if($page == 'about') echo 'active' ?>">
<a class="nav-link" href="about.php"><i class="mr-2 fas fa-users"> </i> About Us</a>
</li>
<li class="nav-item dropdown <?php if($page == 'products') echo 'active' ?>" >
<a class="nav-link dropdown-toggle dropdown-toggle-split" href="products.php" data-toggle="dropdown" id="dropedownMenuButton"aria-expanded="false" aria-hospopup="true" >
<i class="mr-2 fas fa-wrench"> </i>Products
</a>
<ul class="dropdown-menu" aria-labelledby="dropedownMenuButton">
<li class="list-group-item">
<a class="dropdown-item" href="bolts-screws.php"> Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="nuts.php"> Nuts </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="washers.php"> Washers </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="screws.php"> Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="socket-bolt-screws.php"> Socket Bolts/Screws </a>
</li>
<li class="list-group-item">
<a class="dropdown-item" href="anchor-fastener.php"> Anchor Fasteners </a>
</li>
</ul>
</li>
<li class="nav-item <?php if($page == 'connect') echo 'active' ?>">
<a class="nav-link" href="connect.php"><i class="mr-2 fas fa-user"> </i> Contact us </a>
</li>
</ul>
</div>
</div>
</nav>
you can check my website also
http://rudrafasteners.com/
It seems you don't add Javascript at your head. Add the followings lines to your HTML <head> tag (Jquery and Bootstrap JS):
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<nav class="navbar navbar-expand-lg navbar-light fixed-top" id="mainNav">
<div class="container">
<a class="navbar-brand" href="{{ route('home.index') }}">En</a>
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse"
data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false"
aria-label="Toggle navigation">
Menu
<i class="fas fa-bars"></i>
</button>
<div class="collapse navbar-collapse" id="navbarResponsive">
<ul class="navbar-nav ml-auto">
<li class="nav-item">
<a class="nav-link" href="{{ route('home.index') }}">Home</a>
</li>
<li class="dropdown nav-item">
<a class="nav-link" data-toggle="dropdown">Categories<i class="icon-arrow"></i></a>
<ul class="dropdown-menu">
#foreach($categories as $category)
<li>
<a href="/?category={{ $category->name }}">
{{ $category->name }}
</a>
</li>
#endforeach
</ul>
</li>
<li class="nav-item">
<a class="nav-link" href="{{ route('about') }}">About Me</a>
</li>
<li class="nav-item">
<a class="nav-link" href="post.html">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
I have the above code in my header which I include in my app.blade.php as #include('user.layouts.header') then I use app.blade.php as my layout.
How do I pass data to the header so that I can stop getting the below error if that's the reason I'm getting the error!
Undefined variable: categories (View: /home/alphy/blogEngidaFinal/resources/views/user/layouts/header.blade.php)
See the documentation.
You can pass params while including the header view,
#include('view.name', ['some' => 'data'])
In your case,
#include('user.layouts.header', ['categories' => ['food', 'drink', 'dessert'])
I am creating a website using Smarty and PDO, here is my header file and I'm not sure how I can make it change depending on whether a user is logged in or not?
When the user isn't logged in these options should appear (Friday, Saturday, Sunday, Sign up, Log in)
But when they sign in I want 'Sign up' and 'log in' to change to 'My account' and 'Sign Out'. Below are is the code I currently have.
//If user is logged in
<div id="navigation"> <ul class="nav" id="navigation">
<nav class="navbar navbar-expand-lg">
<button class="navbar-toggler" id="hideshow" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="far fa-caret-square-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php?p=main">Home <i class="far fa-arrow-alt-circle-right"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=friday">Friday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=saturday">Saturday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=sunday">Sunday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=logout" id="Logout" />Logout <i class="fas fa-sign-out-alt"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=account">My account <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
//If user isn't signed in
<div id="navigation"> <ul class="nav" id="navigation">
<nav class="navbar navbar-expand-lg ">
<button class="navbar-toggler" id="hideshow" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"><i class="far fa-caret-square-down"></i></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="index.php?p=main">Home <i class="far fa-arrow-alt-circle-right"></i><span class="sr-only">(current)</span></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=friday">Friday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=saturday">Saturday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=sunday">Sunday <i class="far fa-arrow-alt-circle-right"></i></a>
</li>
<li class="nav-item">
<a class="nav-link" href="index.php?p=signup" id="signup" />Signup <i class="fas fa-user-plus"></i></a>
</li>
<li class="nav-item">
</i>
</li></ul>
{/if}
</div>
</nav></div>
First of all assign a variable from Controller to your view, example:
$view->assign('USER_ID', $this->auth->getUserId());
then in template:
{if $USER_ID > 0}
{* html or template when user is logged in *}
{* if differences are big, better is create new sub-template: *}
{include file='./header-logged-in.tpl'}
{else}
{* html or template when user is not logged in *}
{include file='./header-logged-out.tpl'}
{/if}
if(isset($_SESSION['user_id'])) {
// User Logged In Navigation
} else {
// User Logged Out Navigation
}
Of course, you didn't provide enough information, this assumes your user session is set to $_SESSION['user_id'] <-- change to whatever your session is saved as.
I am trying to use AdminLTE3 as admin panel in laravel and I have nav-item links which doesn't activate when I click them. I don't know how to fix this. I used the starter.html from adminLTE3 and I have all the required assets for adminLTE3 but my nav-item links are not activated, How can I fix this, I would really appreciate for any help. my side bar code is :
<nav class="mt-2">
<ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="false">
<!-- Add icons to the links using the .nav-icon class
with font-awesome or any other icon font library -->
<li class="nav-item has-treeview menu-open">
<a href="#" class="nav-link active">
<i class="nav-icon fa fa-tachometer-alt"></i>
<p>
Dashboard
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('home')}}" class="nav-link">
<i class="fab fa-elementor nav-icon"></i>
<p>Main</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>
Posts
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('posts.index')}}" class="nav-link">
<i class="nav-icon fa fa-book"></i>
<p>All Posts</p>
</a>
</li>
</ul>
</li>
<li class="nav-item has-treeview">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>
<li class="nav-item">
<a href="{{route('gallery.index')}}" class="nav-link">
<i class="nav-icon fa fa-th"></i>
<p>
Galleries
</p>
</a>
</li>
<li class="nav-item">
<a href="{{route('logout')}}" class="nav-link">
<i class="nav-icon fa fa-code"></i>
<p>
Logout
</p>
</a>
</li>
</ul>
</nav>
I tried the suggestion provided by kapitan
nav-link {{ Route::current()->getName() == 'posts.index' ? 'active' : '' }}
but problem is when I click any nav-item it hides like this
when I click the service drop down then it shows like this
For simplicity sake:
<a href="#" class="nav-link {{ Route::current()->getName() == 'my.route.name' ? 'active' : '' }}">
As you can see, this is a long cut method, you can improve this further. But this is a good starting point for you.
UPDATE:
Untested, but can you please try this:
<a href="#" class="nav-link {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
UPDATE 2 :
<li class="nav-item has-treeview {{ Request::is('my/url','my/url/*') ? 'active' : '' }}">
<a href="#" class="nav-link">
<i class="nav-icon fa fa-strikethrough"></i>
<p>
Services
<i class="right fa fa-angle-left"></i>
</p>
</a>
<ul class="nav nav-treeview {{ Request::path() == 'my/url/here' ? 'menu-open' : '' }}">
<li class="nav-item">
<a href="{{route('services.index')}}" class="nav-link {{ Request::is('my/url/here') ? 'active' : '' }}">
<i class="fa fa-asterisk nav-icon"></i>
<p>All Service</p>
</a>
</li>
</ul>
</li>