I have a web page with a menu made with the bootstrap framework. This menu in its mobile version appears when you click on the toggle button that appears in the upper right corner. This menu slides from the top down and looks like this:
The code of this header menu is this:
<!--========== HEADER ==========-->
<header class="header navbar-fixed-top">
<!-- Navbar -->
<nav class="navbar">
<div class="container" id="main_header_container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="menu-container">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".nav-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="toggle-icon"></span>
</button>
<!-- Logo -->
<div class="logo">
<a class="logo-wrap" href="https://pixels.com/index">
<img class="logo-img logo-img-main" src="img/logo2.png" alt="Logo">
<img class="logo-img logo-img-active" src="img/logo2.png" alt="Logo">
</a>
</div>
<!-- End Logo -->
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse nav-collapse">
<div class="menu-container">
<ul class="navbar-nav navbar-nav-right">
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/index">HOME</a></li>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_leistungen" href="#">LEIST</a><a id="arrow_to_dropdown-mob" onclick="myFunction()" class="nav-item-child dropbtn">LEIST</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li><a class="dropdown-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="dropdown-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="dropdown-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</ul>
</li>
<div id="myDropdown" class="dropdown-content">
<li><a class="drop-item" href="https://pixels.com/webdesign">Webdesign</a></li>
<li><a class="drop-item" href="https://pixels.com/marketing">Marketing</a></li>
<li><a class="drop-item" href="https://pixels.com/corporate-design">Corporate Design</a></li>
</div>
<li class="nav-item dropdown">
<a class="nav-item-child nav-item-hover" id="a_lasungen" href="#">LOSING</a>
<a id="arrow_to_dropdown-mob" onclick="myFunctiondrop()" class="nav-item-child dropbtn">LOSING</a>
<ul class="dropdown-menu" id="ul_dropdownIDDesktop" aria-labelledby="dLabel">
<li class="dropdown-item"><a class="drop-item" href="https://nivamedia.ch/kurier-lieferdienst">PixelsMarket</a></li>
</ul>
</li>
<div id="myDropdown1" class="dropdown-content1">
<li class="drop-item"><a class="drop-item" href="https://pixels.com/kurier">PixelsMarket</a></li>
</div>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/referns">REFERNS</a></li>
<li class="nav-item"><a class="nav-item-child nav-item-hover" href="https://pixels.com/contact">CONTACT</a></li>
</ul>
</div>
</div>
<!-- End Navbar Collapse -->
</div>
</nav>
<!-- Navbar -->
</header>
<!--========== END HEADER ==========-->
What I would like to do is that the header menu slide from left to right, something like this:
How Can I do that with css?
change this class : navbar-nav-right to navbar-nav-left
<ul class="navbar-nav navbar-nav-left">
<li class="nav-item"><a class="nav-item-child nav-item-
hover" href="https://pixels.com/index">HOME</a></li>
Related
I want to draw dynamic sidebar menu data from database using AJAX in the adminlte 3 dashboard with bootstrap 4 dashboard. When I loaded sidebar menu data dynamically by using AJAX, sidebar open or collapse not working.My JSFiddle URL is given below. When static data push on '.sidebar' class without ajax, menu open/hide working. But using ajax call menu open/hide not working.
$(document).ready(function(){
var url = "";
$.ajax({
url: url,
}).done(function(resp){
//retrive data
var ret = '<nav class="mt-2"><ul class="nav nav-pills nav-sidebar flex-column" data-widget="treeview" role="menu" data-accordion="true"><li class="nav-item"><i class="nav-icon fas fas fa-user"></i><p>Admin<i class="right fas fa-angle-left"></i></p><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Rahim</p></li></ul><ul class="nav nav-treeview"><li class="nav-item"><i class="far fa-circle nav-icon"></i><p>Test</p></li></ul></li></ul></nav>';
$('.sidebar').html(ret);
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body class="sidebar-mini sidebar-closed sidebar-collapse" style="height: auto;">
<!-- Site wrapper -->
<div class="wrapper">
<!-- Navbar -->
<nav class="main-header navbar navbar-expand navbar-primary navbar-dark">
<!-- Left navbar links -->
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" data-widget="pushmenu" href="#" role="button"><i class="fas fa-bars"></i></a>
</li>
<!--
<li class="nav-item d-none d-sm-inline-block">
Home
</li>
<li class="nav-item d-none d-sm-inline-block">
Contact
</li>
-->
</ul>
<!-- Right navbar links -->
<ul class="navbar-nav ml-auto">
<li class="nav-item dropdown user-menu">
<a href="#" class="nav-link dropdown-toggle" data-toggle="dropdown">
<img src="public/images/login_man.png" class="user-image img-circle elevation-2" alt="User Image">
<span class="d-none d-md-inline">admin</span>
</a>
<ul class="dropdown-menu dropdown-menu-lg dropdown-menu-right">
<!-- Menu Footer-->
<li class="user-footer">
<!--Profile-->
Sign out
</li>
</ul>
</li>
<!--
<li class="nav-item">
<a class="nav-link" data-widget="fullscreen" href="#" role="button">
<i class="fas fa-expand-arrows-alt"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" data-widget="control-sidebar" data-slide="true" href="#" role="button">
<i class="fas fa-th-large"></i>
</a>
</li>
-->
</ul>
</nav>
<!-- /.navbar --><aside class="main-sidebar main-sidebar-custom sidebar-dark-primary elevation-4">
<a href="#" class="brand-link">
<i class="brand-image fas fa-tachometer-alt" style="opacity: .8"></i>
<span class="brand-text font-weight-light">Dashboard</span>
</a>
<div class="sidebar">
</div>
</aside>
<div class="container-fluid">
<div class="content-wrapper" style="min-height: 549px;">
</div>
</div>
</div>
</body>
Just put the code after success function and it will work.
$('[data-widget="treeview"]').Treeview('init');
Clicking on a toggle bar unable to move the banner image down it is displaying the menu on the banner image.when the user clicks on toggle bar in mobile devices the menu should be displayed and below the menu, banner image should be displayed and if the user clicks on toggle bar again menu should be hidden and header should move up by default.Here is the code which I have used
<link href="css/bootstrap.min.css" rel="stylesheet">
<script src="js/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<div class="slider">
<img src="images/backgroundbanner.jpg" class="img-responsive backgroundbanner" alt="backgroundbanner" >
<img src="images/finalbackgroundbanner.jpg" class="img-responsive mobilebackgroundbanner" alt="backgroundbanner" >
<div class="banner_content home_new_section">
<div class="b_head1"><span style="color:#26237B;font-weight:bold;">ONSHORE</span> <span style="color:#E2011B;font-weight:bold;">OFFSHORE</span> Team on Demand </div>
<div class="b_head">Scale your Engineering&Technology team briskly</div>
<span class="pre_vetted">Pre-vetted, ready to go, $30 / hr</span>
</div>
<div class="get_started">Get Started</div>
<!-- Navigation -->
<nav class="navbar navbar-expand-lg navbar-dark bg-dark fixed-top">
<div class="container">
<a class="navbar-brand" href="#">
<img src="images/logo1.gif" width="110" height="26" alt="" class="logoimage img-responsive">
</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarCollapse">
<ul class="navbar-nav ml-auto navbar-right">
<li class="nav-item">
<a class="nav-link home" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link cost" href="#" >Cost</a>
</li>
<li class="nav-item">
<a class="nav-link offshore" href="http://teknotrait.com/">Offshore Partner</a>
</li>
<li class="nav-item">
<a class="nav-link contactus" href="#contact" >Contact Us</a>
</li>
</ul>
</div>
</div>
</nav>
</div>
<!-- Page Content -->
Here is the website url
Im am working on this site right now: https://handyfreak011.github.io/FreetimeElements/.
I already set
body { position: relative;}
And applied
<body id="home" data-spy="scroll" data-target="#main-nav" data-offset="150">
To my body.
That is my nav:
<nav class="navbar main-nav" id="main-nav">
<div class="container">
<button class="navbar-toggler hidden-sm-up " type="button" data-toggle="collapse" data-target="#navibar" aria-controls="navibar" aria-expanded="false" aria-label="Toggle navigation">
☰
</button>
<div class="collapse navbar-toggleable-xs" id="navibar">
<ul class="nav navbar-nav">
<li class="nav-item">
<a class="nav-link" href="#info">START</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#philo">PHILOSOPHIE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#products">PRODUKTE</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#contact">KONTAKT</a>
</li>
</ul>
</div>
</div>
</nav>
The ID's of the elements are as in the navigation and if you klick them in the nav, you are sent there. But scrollspy isn't working, the navbar's elements don't change to active when you scroll in the area.
Thanks for you help!
How can I avoid use of Toggle button navigation of Bootstrap
and add on OverFlow Horizontal set fixed height a horizontal scroll with hidden bar for movil...
scheme code:
<div class="row border-bottom">
<nav class="navbar navbar-fixed-top white-bg" role="navigation">
<div class="navbar-header">
<a class="navbar-minimalize minimalize-styl-2 btn btn-primary " href="#"><i class="fa fa-bars"></i> </a>
<a class="logo-lrg" href="#"> <img alt="image" class="img-circle1" src="sources/img/logos/LOGO.png" /></a>
</div>
<!--START MENU NEED HORIZONTAL SCROLL-->
<ul class="nav navbar-top-links navbar-right">
<li> <a id="" href="#"> <i class="fa fa-desktop"></i>Mesa de Control</a> </li>
<li id="" class="dropdown">
Administración</span> <span class="caret"></span>
<ul class="dropdown-menu pull-right">
<li><a id="" href="#">Aprobaciones</a></li>
<li><a id="" href="#">Manejo de Productos</a></li>
<li><a id="" href="#">Control Días Venta Hábiles</a></li>
</ul>
</li>
<li class="logout-click"> <a id="pro-save-p-gen-logout" href="#" > <i class="fa fa-sign-out"></i> <span class="tx1">Cerrar</span> </a> </li>
</ul>
<!--END MENU NEED HORIZONTAL SCROLL-->
</nav>
</div>
So far it looks like this:
Update
this is a example that I want but not work with dropdown on tabs.
http://www.codeply.com/go/DclUsokAoV
Can you try dropdown-menu-right instead of pull-right along with dropdown-menu
I saw many questions like mine but I can't write this JS.
I have a menu like this and I need to put the class="active" in the <li> tag of the page where the user is. This nav-bar is in a php file that I include in each page of the site. Sorry but after 28h of coding I am fuse!
<div class="componant-section" id="navbars">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
<img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li>Home</li>
<li class="dropdown">
Clienti <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Aggiungi nuovo...</li>
<li>Lista</li>
</ul>
</li>
<li class="dropdown">
Fornitori <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Aggiungi nuovo...</li>
<li>Lista</li>
</ul>
</li>
<li>Fatture</li>
<li>DDT</li>
<li>Preventivi</li>
<li>NDC</li>
<li>Listini</li>
<li class="dropdown">
Controllo <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li>Login</li>
<li>Causale</li>
<li>Mezzo Trasporto</li>
<li>IVA</li>
<li>Imballo</li>
<li>Articoli</li>
<li>Spese Aggiuntive</li>
<li>Pagamento</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-icons">
<li><a><span class="fa-user fa"></span>
<span class="hidden-lg"><?php echo $user; ?></span></a></li>
<li><a href="http://<?php echo $base_url ?>/function/logout.php">
<span class="fa-cog fa"></span>
<span class="hidden-lg">Logout</span>
<span class="navbar-new"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
I resolved with
<div class="componant-section" id="navbars">
<nav class="navbar navbar-inverse" role="navigation">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse-2"><span class="fa fa-bars"></span></button>
<img class="logo" src="http://<?php echo $base_url ?>/images/logos.png" alt="" width="127">
</div>
<div class="collapse navbar-collapse" id="navbar-collapse-2">
<ul class="nav navbar-nav">
<li id="home">Home</li>
<li class="agg_cliente lista_clienti dropdown">
Clienti <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_cliente">Aggiungi nuovo...</li>
<li id="lista_clienti">Lista</li>
</ul>
</li>
<li class="agg_fornitore lista_fornitori dropdown">
Fornitori <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="agg_fornitore">Aggiungi nuovo...</li>
<li id="lista_fornitori">Lista</li>
</ul>
</li>
<li id="fatture">Fatture</li>
<li id="ddt">DDT</li>
<li id="preventivi">Preventivi</li>
<li id="ndc">NDC</li>
<li id="listini">Listini</li>
<li class="ck_login ck_causale ck_mezzo ck_iva ck_imb ck_art ck_spagg ck_pagam dropdown">
Controllo <span class="fa-chevron-down fa"></span>
<ul class="dropdown-menu">
<div class="arrow top"></div>
<li id="ck_login">Login</li>
<li id="ck_causale">Causale</li>
<li id="ck_mezzo">Mezzo Trasporto</li>
<li id="ck_iva">IVA</li>
<li id="ck_imb">Imballo</li>
<li id="ck_art">Articoli</li>
<li id="ck_spagg">Spese Aggiuntive</li>
<li id="ck_pagam">Pagamento</li>
</ul>
</li>
</ul>
<ul class="nav navbar-nav navbar-right navbar-icons">
<li><a><span class="fa-user fa"></span>
<span class="hidden-lg"><?php echo $user; ?></span></a></li>
<li><a href="http://<?php echo $base_url ?>/function/logout.php">
<span class="fa-cog fa"></span>
<span class="hidden-lg">Logout</span>
<span class="navbar-new"></span></a></li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
</div>
and javascript
window.onload=function(){
var Navid = document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Navid){
Navid.setAttribute('class','active');
var father = Navid.parentNode,
grandFather = father.parentNode;
grandFather.setAttribute('class','active');
}
}
You can access the path accessed successfully most of the time in PHP by using the global server request URI variable $_SERVER['REQUEST_URI'].
Simply, you need to compare the value of $_SERVER['REQUEST_URI'] to the target of the links in your navigation, and apply a class if it matches. For example:
<li><a href="/ddt.php" <?php echo $_SERVER['REQUEST_URI'] === '/ddt.php' ? 'class="active"' : '' ?>>DDT</a></li>
As a sidenote, you need not use PHP to generate absolute links for your hrefs in HTML - just use relative paths, e.g. /listini.php instead of http://<?php echo $base_url ?>/listini.php.
Your life would be much easier if you looked into using a templating language such as Twig, that separates the logic that dictates how a page should be displayed from the actual layout code.
You could use something a simple as this Javascript solution.
window.onload=function(){
var Nav=document.getElementById(window.location.href.split('/').pop().split('.')[0]);
if(Nav){
Nav.setAttribute('class','active');
}}
How does it work?
Elements you wish to add the class to must have an ID matching the page name
Example
From: Fatture
To: <a id="fatture" href="http://<?php echo $base_url ?>/fatture.php">Fatture</a>
The javascript above will strip down the clients location www.something.com/fatture.php to fatture by splitting the string from / creating an array. The name of the file is last in the array so pop() is used to select the last item in the array leaving you with fatture.php the string is split once again at . creating a new array, the first item in that array is then used in the ID selector "fatture". document.getElementById('fatture')
URL Breakdown
1) window.location.href = www.something.com/fatture.php
2) .split('/') =>
array[0] = www.something.com
array[1] = fatture.php
3) .pop() = Last array/array[1] of .split('/') - fatture.php
4) .split('.')[0] = fatture
If you have any questions about the source code above please leave a comment below and I will reply as soon as possible.
I hope this helps. Happy coding!