I have a drop down menu that when hovered over works and I added a some javascript that toggles a css class .show-menu on and off when click and removes the hover css for mobile devices. My problem is the menu isn't showing when clicked. I can see in the dev tools that the css class is being removed and added, so the javascript is working fine., so it seems to be a css issue. however I'm failing to see any css conflicts that would be causing this issue. Does anyone have any idea what the issue is here?-thanks
I added the entire css sheet in the jsfiddle as I'm clearly missing something
https://jsfiddle.net/kmut5xtu/
<nav>
<ul class="main-nav">
<li class="main-nav-item current-page">Home</li>
<li class="main-nav-item">About
</li>
<li class="main-nav-item characters">
<span>Characters</span>
<ul class="drop-menu">
<li class="drop-menu-back"><span class="material-icons">arrow_back</span>Back</li>
<li>Ethan Clarke</li>
<li>Serena Kiriaga</li>
<li>Marcus Flynn</li>
<li>Emily Ashdown</li>
<li>Director Miles West</li>
</ul>
</li>
<li class="main-nav-item">Author</li>
</ul>
</nav>
!function app(){
!function AddMenuClickHandler(){
let charTab= document.querySelector(".characters");
let toggle= 1;
charTab.addEventListener("click",function(){
let dropMenu=document.querySelector(".drop-menu");
if(toggle===1){
dropMenu.classList.add("show-menu");
toggle=0;
}
else if(toggle===0){
dropMenu.classList.remove("show-menu");
toggle=1;
}
})
}()
}()
The css below is the issue:
.characters:hover {
position: relative;
border-radius: 8px 8px 0 0;
}
.characters:hover .drop-menu{
visibility: visible;
opacity:1;
}
Remove hover from these css and you will be good.
Off the bat, you need to tell your HTML that you are using JS. You do this with script tags:
<script>
Your code here
</script>
While I don't personally use JS to disable clickable menus on phones, there is a really simple way to just make them clickable that BootStrap uses, which, if you use BootStrap, will allow you to easily modify things for mobile views.
Related
I am new to responsive designs and am trying to use media queries. I am trying to make my navigation bar responsive using media queries. The problem is when I size the page in a mobile view the navigation bar displays the SPAN tag but it should drop down the menu list once it is clicked on. I attempted to use jQuery for this process. My code is below:
HTML CODE
<span class="menu-trigger">MENU </span>
<nav class = "nav-main">
<ul>
<li>
HOME
</li>
<li>
ABOUT US
</li>
<li>
PORTFOLIO
</li>
<li>
SERVICES
</li>
<li>
CONTACT US
</li>
</ul>
</nav>
CSS CODE
.nav-main {
width:100%;
background-color: #222;
height:70px;
color:#fff;
}
#media screen and (max-width: 480px){
.menu-trigger{
display:block;
}
.nav-main > ul > li{
float:none;
border-bottom: 2px solid #d5dce4
}
.nav-main {
display:none;
}
.nav-main > ul > li:last-child{
border-bottom: none;
}
}
JQUERY CODE
<script type ="text/javascript">
jQuery(".menu-trigger").click(function(){
jQuery(".nav-main").slideToggle();
});
</script>
Right now when going on mobile size the content nav-main does disappear and only display the SPAN but when the SPAN is clicked on it is supposed to have a toggle effect displaying the rest of the list in the navbar but nothing seems to happen.
UPDATE ---
JSFIDDLE - https://jsfiddle.net/k4ytvyef/
Without seeing the placement of your scripts, I can only assume that you may have placed the jquery code above your html elements.
Trying this out on jsbin, your code works when the jquery selector is able to find the element after it has been loaded.
To achieve this without moving your code to the bottom of the page, you can wrap your script with jquery's ready event like so:
jQuery( document ).ready(function() {
jQuery(".menu-trigger").click(function(){
jQuery(".nav-main").slideToggle();
});
});
Edit:
To the comment above asking why it doesnt work on jsfiddle:
JQuery is not native javascript. In order to have this work on any test environment, you need to add the jquery library so it can run it along with your code.
I've tried a few JQuery and CSS implementations of this, but can't seem to get it quite right. I'm utilizing FontAwesome icons in the navbar for Bootstrap, and I would like to have a single location where, when the icons are hovered, a text description of them is shown/hidden.
This implementation has gotten me the farthest, with the different captions showing up. However, I need them all to appear in one location (preferably to the front of the ul navbar-nav grouping, as they will be right aligned).
CSS:
div#navbar a span {display: none;}
div#navbar a:hover span {display: block; position: absolute; top: 40px; left:-50px; width: 125px; padding: 5px; margin: 10px; z-index: 100;color: #AAA; background: black;font: 10px Verdana, sans-serif; text-align: center;}
HTML:
<ul class="nav navbar-nav">
<li><div class="nav-button"><i class="fa fa-user"></i></div><span>Text Goes Here</span></li>
<li><div class="nav-button"><i class="fa fa-umbrella"></i></div><span>Text Goes Here 2</span></li>
<li><div class="nav-button"><i class="fa fa-star"></i></div><span>Text Goes Here 3</span></li>
</ul>
The implementation above is based off MeyerWeb's CSS Popup Demo
I have tried JQuery Fiddles that worked for simple classes/links such as this: http://jsfiddle.net/AstroCB/42gV5/ , but I'm uncertain if the depth of Bootstrap classes is causing some sort of override, as I cannot seem to get JQuery show/hide functions based on the examples I've seen to work.
I have also tried ~ relations such as: http://jsfiddle.net/YsHA4/ but am again hitting a wall.
It's highly likely I am just approaching this the wrong way, but I've been attempting to solve this problem for a few days now and just can't seem to find a solution. A fresh set of eyes and any and all help would be absolutely appreciated. If there's any way I can clarify, please let me know. Thank you!!
EDITED TO ADD: I do not need the final result to be spans inside the links in any regard, they can be hidden external divs, etc. The example I gave is the farthest I have managed to get the functionality to what I want (separate information showing up for each hover), but if a different approach using JS/etc removes the spans or hard codes the text into a JS string in some way, so be it. I am just looking to get this functionality to work as anticipated with Bootstrap, whatever implementation best gets it there!
Also, see my comment for an image representation of what I am trying to achieve.
I made a Fiddle based on your image.
It uses bootstraps right section for the menu.
I have applied a loop to each link:
$.each($('a'), function() {
$(this).hover(function() {
$('.placeholder').html($(this).html());
});
});
It simply takes the HTML inside a tag and places in the menu item with the class placeholder.
Update:
In your case your links are bit more complex so the selector for the loop would look like this:
$.each($('a > span'), function() {
// do stuff here
});
This fetches all links in your document and then the span element inside that.
Aaand finally a Fiddle for the HTML you have provided here.
Code below edited since loops are unecessary:
$('a').hover(function() {
$('.placeholder').html($(this).html());
});
$('a > span').hover(function() {
// do stuff here
});
HTML
<ul class="nav navbar-nav">
<li class="hover"><div class="nav-button"><i class="fa fa-user"></i><span class="text hidden"> Text Goes Here</span></div>
</li>
<li class="hover"><div class="nav-button"><i class="fa fa-umbrella"></i><span class="text hidden"> Text Goes Here 2</span></div>
</li>
<li class="hover"><i class="fa fa-star"></i> <span class="text hidden">Text Goes Here 2</span>
</li>
</ul>
JS
$(document).ready(function () {
$('.hover').each(function (index, el) {
var thiz = $(this);
var text = thiz.find('.text');
thiz.on('mouseover', function (e) {
text.removeClass('hidden');
});
thiz.on('mouseleave', function(e){
text.addClass('hidden')
});
});
});
jsFiddle
I made an HTML layout that works as a filter and my HTML looks something like this:
<div class="filter">
<small>User</small>
<em ng-bind="filter.name">All Users</em>
<nav>
<a class="selected" ng-click="filter={name: 'All Users', filter: ''}">All Users</a>
<hr>
<a ng-click="filter={name: 'Person1', filter: 'Person1'}">Person1</a>
<a ng-click="filter={name: 'Person2', filter: 'Person2'}">Person2</a>
<a ng-click="filter={name: 'Person3', filter: 'Person3'}">Person3</a>
</nav>
</div>
Now my approach is I created a directive and when I press on the filter, it adds an active class near the filter class, and with CSS when the active class is applied, I show the
.filter nav {
display: none;
}
.filter.active nav {
display: block;
}
My question is: is there any way can I do the show / hide of the nav div animated using the Angular 1.2 animation library?
Thank you in advance, Daniel.
You might want to review ngAnimate documentation hide/show animation comes (along with others) comes for almost free. You just need to reference ngAnimate, inject $animate and add the enter/leave css styles.
A while ago you guys helped me with a page jump issue on this page in this forum post. I will be referring to the styled checkboxes under "Clients." Well a while back I just set the min-height on the changing container and it then prevented the page jump, but no longer does (for an unknown reason). Well, I went ahead and put window.scrollTo(0,1400) in my function, but it doesn't center the styled checkboxes correctly on IE so now I'm back to trying to figure out why the page jumps.
The weirdest thing though.. the page jumps when clicking one of the styled checkboxes even if you disable javascript (in chrome developer tool settings and then refresh). Why would a checkbox with javascript turned off cause a page jump?
I had a quick look on your source code I couldn't figure out why do you pull data using json on each click? does the clients change LIVE?
What i mean is you can list all your clients without Using Get Json or any kind of live query and then add a class for their related respective verticals.
For example for Services and healthcare,
css
#verticals li{
float:left;
list-style:none;
background-color: #97ceff;
color: black;
border-radius:2px;
margin-right:10px;
padding:5px 10px;
cursor:pointer;
}
#verticals li.activevertical{
background-color: #2f7fc7;
color: #fff;
}
html output
<!-- list verticals options !-->
<ul id="verticals">
<li id="service">Services</li>
<li id="healthcare">Healthcare</li>
</ul>
<div style="clear:both"></div>
<ul id="customers" class="">
<!-- Add filter class here in the <li> add filter_ before vertical kind !-->
<li class="filter_service">Ecova</li>
<li class="filter_service">HP</li>
<li class="filter_service">Gartner</li>
<li class="filter_healthcare">Henry Schein</li>
<li class="filter_healthcare">GE Healthcare</li>
<li class="filter_healthcare">BerylHealth</li>
<!-- and if a vertical can be in two categories add both vertical classes !-->
<li class="filter_healthcare filter_service">BerylHealth Show in Service and Healthcare</li>
</ul>
jQuery : very short version
jQuery(document).ready(function($){
$("#verticals li").on('click', function(){
var filterli = ".filter_"+$(this).attr("id");
$("#customers li").hide();
$("#verticals li").removeClass('activevertical');
$(this).addClass('activevertical');
$(filterli).show();
});
});
check it out at JSFiddle
I've been reading around and people recommending only CSS to change the current page navbar link background color but I don't get how that's possible since CSS is static and I won't be able to add/remove the .currentlink class on the links? So right now I'm using JS / jquery to try to add / remove class based on click, but the site refreshes and nothing is saved when I click, so that the class that I added/removed doesn't do anything. May someone guide me the right direction? Example: I click on the last link of the HTML I gave you, but it would just go to that site and since everything refreshes to a new site, the background doesn't change.
HTML
<nav class="clearfix">
home
about us
tour
flickr search
<div class="rightnav">
Sign Up
Log In
</div>
</nav>
CSS
.greybackground {
background: #E6E6E6;
}
JS
$('nav a').on('click', function(){
$('nav a').removeClass('greybackground');
$(this).addClass('greybackground');
});
If you are creating multi page website and want to change link color on each page, simply create a class with specific css properties and add this class to respective navbar link on each page. Make sure that on any page, class must be added to only respective page link.
Any if you are looking solution for single page website following code will work just fine
Here is html css code for simple navigation bar
<h1>navbar</h1>
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
<button>Log in</button>
</ul>
a{
background-color:black;
padding:10px;
text-decoration:none;
color:white;
}
li{
margin:30px;
display:inline;
}
ul{
list-style-type: none;
}
.transform{
background-color:red;
}
button{
background-color:green;
padding:10px;
color:white;
}
This is javascript to change bg color of active link
$("a.link").click(function(){
$("a.link").css("background-color", "black");
$(this).css("background-color", "red");
});
Simply add class '.link' for every navbar link and when user clicks on any navbar link css property ad applied to that link and all other links will change their bg color to none. I hope it helps
https://codepen.io/pranjalkoshti/pen/GMarvj
The easiest way to achieve this is identify an element that
Is present on every page
You can add markup to
For example, a div for your overall content.
If you add the following to the div :
<div id="content" data-currentpage="about">
This will identify the page uniquely.
and for each menu item add a class that matches:
<li>Home</li>
<li>Products</li>
<li>About us</li>
<li>Contact</li>
So, on page ready ( jQuery(document).ready(function(){...) run the following code:
// -- Find the pages 'data' tag --
var currentPage = jQuery('#content').data('currentPage');
// -- Add a dot to turn it into a class identifier --
currentPage = '.' + currentPage;
// -- Add a background class to to the menu item with that class --
jQuery(currentPage).addClass('greybackground');
This will 'match' each page (via the data-currentpage tag) to the corresponding menu item and add your background class to that menu item.
Solution in vanilla JS (HTML, CSS).
Navbar items need to be in class .navlinks
Add styling under the class current-link.
<html>
<nav>
<ul>
<li class="navlinks"></li>
<li class="navlinks"></li>
</ul>
</nav>
</html>
<style>
.current-link {
background-color: red;
}
</style>
<script>
let links = document.getElementsByClassName("navlinks");
for(let i = 0;i < links.length;i++){
if (links[i].href.replace(/\/$/, '') == ocument.URL.replace(/\/$/, '')){
links[i].classList.add("current-link");
}
}
</script>