I am created a navigation bar with bootstrap. I want to get the navigation menu item name with PHP code. I was trying to do that with 'GET' method but I cannot do that without changing the page. Here I attached the nav-bar code.
<body>
<!-- ======================== Navigation Bar ============================== -->
<section id="nav-bar">
<nav class="navbar navbar-expand-lg navbar-light static-top">
<div class="container-fluid p-0" id="navbarSupportedContent">
<a class="navbar-brand" href="#"><img src="../images/logo.png"/></a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarResponsive"
aria-controls="navbarResponsive" 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">
<div class="hori-selector"><div class="left"></div><div class="right"></div></div>
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Gallery</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">About</a>
</li>
</ul>
</div>
</div>
</nav>
</section>
<?php
echo "Selected Item"; // display selected navigation item here.
?>
</body>
</html>
This is my index.php page body. I want to get the selected item name on the same index.php page. Please can anyone help me?
I used JavaScript and Ajax to solve this
Related
<nav class="navbar navbar-expand-lg navbar-dark px-2 " style="background-color:#E53935;">
<a class="navbar-brand" href="#">HeadOverMeals</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav ">
<li class="nav-item active">
<a class="nav-link" href="#">Home</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Contact</a>
</li>
<li class="nav-item active">
<a class="nav-link" href="#">Cart</a>
</li>
</ul>
</div>
</nav>
Make sure you have followed these steps:
Step 1: Add proper "css" file inside the "header tag" and the "javascript" file at the end of the "body tag". You can find the links over here https://www.bootstrapcdn.com/
Step 2:Try copying the default navbar from the bootstrap website and then editing it.
You can find it over here https://getbootstrap.com/docs/4.0/components/navbar/
I faced the similar problem and the step-1 solved it.
I will need some help with the menu showing on mobile. When the STORE menu is clicked on mobile version it does not expand and instead closes the general menu. Here is the link of the web page. Any help will be appreciated.
<body> looks like
<!-- The #page-top ID is part of the scrolling feature - the data-spy and data-target are part of the built-in Bootstrap scrollspy function -->
<body id="page-top" data-spy="scroll" data-target=".navbar">
Menu HTML
<nav class="navbar navbar-toggleable-md navbar-inverse bg-inverse header-transparent">
<div class="container">
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<a class="navbar-brand page-scroll logo no-margin" href="#page-top"><img src="images/logo-uk.png"></a>
<div class="collapse navbar-collapse " id="navbarNav">
<ul class="navbar-nav ml-auto ">
<li class="nav-item active">
<a class="page-scroll nav-link" href="#page-top">HOME </a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#frames"></a>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="ppgtrikes.php"></a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" id="navbarDropdown" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
STORE
</a>
<div class="dropdown-menu">
<a class="page-scroll nav-link" href="#engines">
<font color="#000000"></font>
</a>
<a class="page-scroll nav-link" href="#harnesses">
<font color="#000000"></font>
</a>
</div>
</li>
<li class="nav-item ">
<a class="page-scroll nav-link" href="#contact"></a>
</li>
</ul>
</div>
</div>
<!-- End of Container -->
</nav>
You have 2 Bootstrap navs, one inside the other.
UPDATED
In this file http://www.evoaviation.co.uk/js/custom.js you have part of code at the beginning
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
$('.navbar-collapse a').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
Replace it with following
//Auto Close Responsive Navbar on Click
function close_toggle() {
if ($(window).width() <= 768) {
// checking if there is no 'data-toggle' in <a>
$('.navbar-collapse a:not([data-toggle])').on('click', function () {
$('.navbar-collapse').collapse('hide');
});
}
else {
$('.navbar .navbar-inverse a').off('click');
}
}
<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 have a problem with dropdown bootstrap menu in joomla. It looks like it's expaneded all the time. I've already overwritten a mod_menu, so < li > have a class = "nav-item" and I think it can be cause of this problem. Maybe someone had a simillar problem, and know how to solve this. enter image description here
The red element's should be visible only when i focus the 'dropdown menu', but they are visible all the time.
There is a html of the menu (Sorry for the style of code)
<nav class="navbar navbar-light navbar-expand-md" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav ml-auto" id="nav">
<li class="item-106 nav-item">Main</li><li class="item-107 deeper parent nav-item">Dropdown menu<ul class="nav navbar-nav ml-auto"><li class="item-108 nav-item">First
</li><li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
Edit: I forgot about fourth element in the menu, dont worry about this.
I would like to achieve something like 'hover me' on this page:
https://www.w3schools.com/howto/howto_css_dropdown.asp
the example in the link ( W3School ) is done with only css, but you html has bootstrap classes
so to make the dropdown work you need bootstrap's .js and
here's a working fiddle : https://jsfiddle.net/69hev2g4/23/
basically you needed an id for the second ul and add data-target and dropdown-collapse to the link before , and the class collapse for it to be hidden at first,
<nav class="navbar navbar-light" id="navbar" style="background-color:#282d32;">
<div class="container-fluid">
<a class="navbar-brand" href="#" id="logo" style="color:#ffffff;font-size:25px;font-weight:500;letter-spacing:0px;font-family:'Noto Sans', sans-serif;"><strong>#</strong></a>
<button class="navbar-toggler" data-toggle="collapse" data-target="#navcol-1">
<span class="sr-only">Toggle navigation</span>
<span class="navbar-toggler-icon"></span>
</button>
<div class="" id="navcol-1" style="font-family:'Noto Sans', sans-serif;">
<ul class="nav navbar-nav " id="nav" >
<li class="item-106 nav-item">Main</li>
<li class="item-107 deeper parent nav-item" style="width:284px;">Dropdown menu
<ul class="nav navbar-nav collapse"id="dropdown">
<li class="item-108 nav-item">First</li>
<li class="item-115 nav-item">Second</li>
<li class="item-109 nav-item">Third</li>
<li class="item-110 nav-item">Wywrotki</li>
</ul>
</li>
<li class="item-112 nav-item">
xxx
</li>
</ul>
</div>
</div>
</nav>
you can use this tool to see the differences in code : https://www.diffchecker.com/
I use bootstrap theme bs-admin-bcore and I want to make menu in file "menu.php" to be more dynamic.
For example, I have this code :
<ul id="menu" class="collapse">
<li class="panel">
<a href="index.php" >
<i class="icon-table"></i> Dashboard
</a>
</li>
<li class="panel ">
<a href="#" data-parent="#menu" data-toggle="collapse" class="accordion-toggle" data-target="#component-nav">
<i class="icon-tasks"> </i> UI Elements<span class="pull-right"><i class="icon-angle-left"></i></span> <span class="label label-default">10</span>
</a>
<ul class="collapse" id="component-nav">
<li class=""><i class="icon-angle-right"></i> Buttons </li>
</ul>
</li>
</ul>
when I call index.php <li class="panel"> becomes <li class="panel active"> and when I call button.php EU Elements becomes active.
You have to add "active" class to the parent li of buttons as well n it will work.