I have this code for a menu in my html, the options I need to show in the menu are one that are input by the user, so I don't know how to add them. Should I just append everything?
<div id="demo-menu" class="mdc-menu-surface--anchor">
<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">edit</button>
<div class="mdc-menu mdc-menu-surface">
<div class="mdc-menu mdc-menu-surface">
<ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
<li class="mdc-list-item" role="menuitem">
<span class="mdc-list-item__ripple"></span>
<span class="mdc-list-item__text">A Menu Item</span>
</li>
</ul>
</div>
</div>
</div>
Related
I need to give the first div a grey background when the dropdown is open. I've been able to apply css depending on the a tag's aria-expanding for the child elements but I'm not sure how to do that for a parent element. I'm using Vue so I don't want to use any Jquery.
<li v-for="(item, index) in locations" :key="index">
<div id="active-hov-div">
<a
id="brand-nav-item-link-id"
class="brand-nav-item-link"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<label class="active-hov">
{{item.label}}
</label>
<i class="fa fa-sort-down test-down"></i>
<i class="fa fa-sort-up test-up"></i>
</a>
<div class="dropdown-menu dropdown-menu-end locations-ul">
<li class="locations-li">
<FindACommunity />
</li>
<ul class="locations-dropdown-ul">
<li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
<a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
</li>
</ul>
</div>
</div>
</li>
Did you try the :first-child?
https://www.w3schools.com/cssref/sel_firstchild.asp
May be you can use the index in you v-for and define the gray-bg at your styles, then use the index === 0 to deside if is needed to show the gray background ,I hope it can work for you
<template>
<!-- ... -->
<li v-for="(item, index) in locations" :key="index">
<div id="active-hov-div" :class="{'gray-bg':index === 0}">
<a
id="brand-nav-item-link-id"
class="brand-nav-item-link"
type="button"
data-bs-toggle="dropdown"
aria-expanded="false"
>
<label class="active-hov">
{{item.label}}
</label>
<i class="fa fa-sort-down test-down"></i>
<i class="fa fa-sort-up test-up"></i>
</a>
<div class="dropdown-menu dropdown-menu-end locations-ul">
<li class="locations-li">
<FindACommunity />
</li>
<ul class="locations-dropdown-ul">
<li v-for="(item3, index3) in item.locationsTitles" :key="index3" class="nav-item" style="padding-bottom: 8px">
<a class="brand-nav-dropdown-link" :href="item3.url">{{item3.title}}</a>
</li>
</ul>
</div>
</div>
</li>
<!-- ... -->
</template>
<style>
/*...*/
.gray-bg {
background-color: gray;
}
/*...*/
</style>
In my angular application for small devices the sidebar toggling is working but I want to to close or hide the sidebar when we click on anywhere on the page(i.e body).
.component.html
<nav class="sidebar sidebar-offcanvas active" id="sidebar">
<ul class="nav">
<li class="nav-item nav-profile">
<a href="javascript:;" class="nav-link">
<div class="nav-profile-image">
<img src="assets/images/bbbs2.png" alt="profile">
<span class="login-status online"></span>
<!--change to offline or busy as needed-->
</div>
<div class="nav-profile-text">
<span class="font-weight-bold mb-2" style="color: #00B5B8"></span>
</div>
</a>
</li>
<li class="nav-item" [ngClass]="{ 'active': dashboard.isActive }">
<a class="nav-link" routerLink="/dashboard" routerLinkActive #dashboard="routerLinkActive">
<span class="menu-title" style="color: #00B5B8">Dashboard</span>
<i class="mdi mdi-home menu-icon" style="color:#00B5B8"></i>
</a>
</li>
// --and some more sidebar tabs
Now I want to remove the sidebar when the class is not active (class name is active).
<nav
class="sidebar sidebar-offcanvas"
[ngClass]="{'active': condition}"
id="sidebar">...
In this way you can control if class "active" is inserted or not.
The condition obviously is a boolean and you can control it by a click listener in the rest of your application.
...
...
Maybe you can use a service variable, localstorage, or a store...
When I click on the parent expand component,child components are loading with list of expandable component. when I click on the child component, parent and child compoments were collapsing. suggest me some hints. The tree structure of this is like parent is Countries-->States-->Provisions-->Mandals
<li data-toggle="collapse"
data-parent="#accordion"
aria-expanded="false"
aria-controls="Provisions"
th:each="ProvisionsName,indexObj :${ProvisionsNames}"
th:attr="data-target='#Provisions'+${indexObj.index}"><span
data-feather="plus-circle"></span> <span
th:text="${ProvisionsName}"> </span>
<div class="collapse in"
th:attr="id='Provisions'+${indexObj.index}">
<div >
<ul style="list-style-type: none;">
<li th:each="ProvisionsList : ${ProvisionsMap.get(ProvisionsName)}">
<span th:text="${ProvisionsList}"> </span><br> <label><strong>Provisions
:</strong> </label><span th:text="${ProvisionsName}"> </span>
<div id="accordion-sub">
<ul style="list-style-type: none;">
<li data-toggle="collapse"
aria-expanded="false" data-parent="#accordion-sub"
aria-controls="Mandals"
th:each="MandalsName,indexObjs :${ProvisionsMandalsMap.get(ProvisionsName)}"
th:attr="data-target='#Mandals'+${indexObjs.index}">
<span data-feather="plus-circle"></span> <span
th:text="${MandalsName}"></span>
<div class="collapse in"
th:attr="id='Mandals'+${indexObjs.index}">
<ul style="list-style-type: none;">
<li th:each="MandalsList : ${MandalsMap.get(MandalsName)}">
<span th:text="${MandalsList}"> </span>
</li>
</ul>
</div>
</li>
</ul>
</div>
</li>
</ul>
</div>
</div></li>
</ul>
</div>
I've built a Nav bar with a profile dropdown (right hand side of menu):
http://www.bootply.com/Rqj51l2VFO
<nav class="navbar navbar-inverse">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="myNavbar">
<ul class="nav navbar-nav" <!--style="width:96%" -->>
<li>Open Cases</li>
<li>Closed Cases</li>
<li><a href data-toggle="modal" data-target="#create_case" data-backdrop="true">Raise New Case</a></li>
<li class="active">{$case['object_ref']}</li>
<!-- <li style="float:right;"><span class="glyphicon glyphicon-question-sign"/></li> -->
</ul>
<!-- http://bootsnipp.com/snippets/featured/account-in-navbar -->
<ul class="nav navbar-nav navbar-right">
<li class="dropdown" id="menu">
<a href="#" data-toggle="dropdown">
<span class="glyphicon glyphicon-user"></span>
<strong>{$person['name']}</strong>
<span class="glyphicon glyphicon-chevron-down" style="margin-left: 10px;"></span>
</a>
<ul class="dropdown-menu">
<li>
<div class="navbar-login" style="width: 400px;">
<div class="row">
<div class="col-lg-4">
<p class="text-center"><span class="glyphicon glyphicon-user icon-size" style="font-size: 75px;"></span></p>
<p>Change Photo</p>
</div>
<div class="collapse" id="change_pic">
<p>Hi!</p>
</div>
<div class="col-lg-8">
<p class="text-left"><strong>Email Address</strong></p>
<p class="text-left small">{$person['main_location[email]']}</p>
</div>
</div>
</div>
</li>
<li class="divider"></li>
<li>
<div class="navbar-login navbar-login-session">
<div class="row">
<div class="col-lg-3"></div>
<div class="col-lg-6">
<p>Logout</p>
</div>
<div class="col-lg-3"></div>
</div>
</div>
</li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
When I click the change photo link, I want a Div to open and the menu to stay open so the user can interact with an input that shows I.e the user would enter a URL to the photo they want in the profile.
This works fine but the menu disappears. So I added the following JS so the menu stays:
JS:
$('#menu .dropdown-menu').on({
"click": function(e) {
e.stopPropagation();
}
});
The issue I have is that now the menu stays open - the bootstrap collapse class isn't working to show/hide.
Could anybody explain what I'm doing wrong here please?
Here is one way to keep the dropdown open after click and keep collapse class working to show/hide. ...
add ID to your Change photo button:
<p>Change Photo</p>
use this following function:
$('#change-photo').on('click', function () {
$('#change_pic').toggle();
return false;
});
check it out here: http://www.bootply.com/8Yo0fBXgN9#
I'm using bootstrap latest version.
I create a main menu like this:
This is the code for in my html view:
<div class="container">
<div class="row">
<div class="btn-group btn-group-justified">
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-folder-close"></span>
<p>header Menu 1</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-flash"></span>
<p>header Menu 2</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-list-alt"></span>
<p>header Menu 3</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-home"></span>
<p>header Menu 4</p>
</button>
</div>
<div class="btn-group">
<button type="button" class="btn btn-nav">
<span class="glyphicon glyphicon-wrench"></span>
<p>header Menu 5</p>
</button>
</div>
</div>
</div>
</div>
Now I would like, when user scrolling, change this menu into a fixed to top navbar like this (check the link to have a better idea, scroll to see the animation):
this is the code for the nav fixed to top:
<nav class="navbar navbar-default" role="navigation">
<div class="container">
<!-- Brand and toggle get grouped for better mobile display -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#dropdown-thumbnail-preview">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand active" href="#">Brand</a>
</div>
<!-- Collect the nav links, forms, and other content for toggling -->
<div class="collapse navbar-collapse" id="dropdown-thumbnail-preview">
<ul class="nav navbar-nav">
{# Suivis Fluides #}
<li class="dropdown thumb-dropdown">
Header Menu 1 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Suivis Contrats #}
<li class="dropdown thumb-dropdown">
Header Menu 2 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Patrimoines #}
<li class="dropdown thumb-dropdown">
Header Menu 3 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# Gestion Equipements Technique #}
<li class="dropdown thumb-dropdown">
Header Menu 4 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
{# User #}
<li class="dropdown thumb-dropdown navbar-right">
Menu Header 5 <span class="caret"></span>
<ul class="dropdown-menu" role="menu">
<li class="divider"></li>
<li><a href="#">
sub menu 1
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
<li>
<a href="#">
sub menu 2
<div class="thumbnail">
<img class="img-responsive" src="http://wallmeta.com/wp-content/uploads/2015/03/Dark-Wallpaper-HQ-Photos-Desktop.jpg">
</div>
</a>
</li>
</ul>
</li>
</ul>
<form class="navbar-form navbar-right" role="search">
<div class="input-group">
<input type="text" class="form-control" placeholder="Search" name="q">
<div class="input-group-btn">
<button class="btn btn-default" type="submit"><i class="glyphicon glyphicon-search"></i></button>
</div>
</div>
</form>
</div><!-- /.navbar-collapse -->
</div><!-- /.container-fluid -->
</nav>
The purpose of this question is to render my main menu into a navbar fixed to top when user is scrolling.
Anybody knows what is the best solution and to make this?
You could use something like Prinzhorn/skrollr or imakewebthings/waypoints to define, when (talking about scroll position) to add/remove a class which makes the navbar sticky.
You can do something like below if you have an option of including jquery
$(window).scroll(function () {
//if you hard code, then use console
//.log to determine when you want the
//nav bar to stick.
console.log($(window).scrollTop())
if ($(window).scrollTop() > 280) //Change this value 280 as per your need
{
$('#nav_bar').addClass('navbar-fixed');
}
if ($(window).scrollTop() < 281) {
$('#nav_bar').removeClass('navbar-fixed');
}
});
Considering the structure of each navigation is different, I would suggest hiding/showing each element with a css class of hidden. Then it's just a matter of adding/removing that class when the first nav is scrolled equal to or passed the top of the viewport.
The jQuery would look something like this:
//Fired when the page is scrolling
$(window).scroll(function() {
var window = $(this);
//Create a reference to both navigations
var buttonNav = $('#buttonNav');
var fixedNav = $('#fixedNav');
if(window.scrollTop() >= buttonNav.offset().top) {
//Hide the buttonNav and Show the fixed nav
buttonNav.addClass('hidden');
fixedNav.removeClass('hidden');
} else {
//The opposite
fixedNav.addClass('hidden');
buttonNav.removeClass('hidden');
}
}
Keep in mind that you will need to add id's to each nav in order to reference them with jQuery and the hidden class just needs the css property display: none; in it. Hope this helps :)
Thanks to you all , I found a solution for my project, following the specification of my clients.
First, I add an id to the button nav, named firstMainMenu. Then, I add an id for the navbar named secondMainMenu. I add an hidden class for the navbar and make the script.
This is the script for:
$(window).scroll(function() {
if ($(this).scrollTop()>222) {
$('#secondMainMenu').removeClass('hidden').fadeIn();
$('#firstMainMenu').addClass('hidden').fadeOut('fast');
} else {
$('#secondMainMenu').fadeOut('fast');
$('#firstMainMenu').removeClass('hidden').fadeIn('slow');
}
});
This is the code who works for me. But the three answer are right too. Tahnk you to all of you for your suggestions. You are the best.
Don't hesitate if you have suggestions or edits for this script.