I am trying to create a hamburger menu. When I click on the three lines I don't get the 'x'. I think I have the classes named correctly. If you need more code I can provide that also.
$('.js--nav-icon').click(function() {
var nav = $('.js--main-nav');
var icon = $('.js--nav-icon');
nav.slideToggle(200);
if (icon.hasClass('.menu-outline')) {
icon.addClass('.close-outline');
icon.removeClass('.menu-outline');
} else {
icon.addClass('.menu-outline');
icon.removeClass('.close-outline');
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="row">
<img src="Resources/img/logo-white.png" alt="Omnifood logo" class="logo">
<img src="Resources/img/logo.png" alt="Omnifood logo" class="logo-black">
<ul class="main-nav js--main-nav">
<li>Food delivery</li>
<li>How it works</li>
<li>Our cities</li>
<li>Sign up</li>
</ul>
<ion-icon class="mobile-nav-icon js--nav-icon" name="menu-outline"></ion-icon>
</div>
You should not use dot(.) in jQuery hasClass,addClass,removeClass functions. remove those dots:
if (icon.hasClass('menu-outline')) {
icon.addClass('close-outline');
icon.removeClass('menu-outline');
}
else {
icon.addClass('menu-outline');
icon.removeClass('close-outline');
}
Please remove (.) as below:
icon.addClass('close-outline');
Related
I am using the mustard css framework but I am having an issue when resizing my browser. The navigation bar is supposed to drop into a hamburger, the appears but when i click it nothing appears within it. I copied and pasted the mustard exact nav bar but still doesn't work. Am i missing something else I have to link.
My Navigation Bar
<nav class="mynav">
<div class="nav-container">
<div class="nav-logo">
<div>
<img class="mylogo" src="imgs/abs.png" alt="">
</div>
<a class="myfont" href="index.php">Abs'olute Fitness</a>
</div>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>About</li>
<li>Contact</li>
<li>Login</li>
</ul>
</div>
</nav>
Mustard Navigation Bar
<nav>
<div class="nav-container">
<div class="nav-logo">
mustard
</div>
<ul class="nav-links">
<li><a class="active" href="/docs/installation">Docs</a></li>
<li>GitHub</li>
<li>Support</li>
</ul>
<a class="mobile-menu-toggle"></a>
<ul class="mobile-menu menu">
<li>Docs</li>
<li>GitHub</li>
<li>Support</li>
</ul>
</div>
</nav>
You need some javascript to toggle appearance. There's jquery example in repository, I'm using vanilla JS for that:
const hide = ((elem) => {
elem.style.display = 'none';
});
const show = ((elem) => {
elem.style.display = 'block';
});
const toggle = document.querySelector('.mobile-menu-toggle');
const menu = document.querySelector('.mobile-menu');
toggle.addEventListener('click', ((e) => {
if (menu.style.display !== 'block') {
e.preventDefault();
e.stopPropagation();
show(menu);
}
}));
document.body.addEventListener('click', ((e) => {
if (menu.style.display === 'block') {
e.preventDefault();
e.stopPropagation();
hide(menu);
}
}));
I am working with following menu bar in laravel. I need highlight current menu item when I click it.
<div class="col-sm-3 col-md-2 sidebar">
<ul class="nav nav-sidebar">
<li style="margin-left:20px;">
{{--<img src="{{ Auth::user()->getAvatarUrl() }}" height="50" width="50" style="border-radius:25px;" />--}}
</li>
<li> # {{ Auth::user()->name }}</li>
<li class="active">PREGO<span class="sr-only">(current)</span></li>
<li>Edit Account</li>
<li>Projects</li>
<li>Collaborators</li>
<li>Todos</li>
</ul>
<ul class="nav nav-sidebar">
<li>Account</li>
<li>Help</li>
{{--<li>Sign Out</li>--}}
</ul>
</div>
how can do this?
I think that if you style the .active class will do what you want to
.active{
/*add hear what you would like to change for example*/
background-color:red;
}
This is the one of the another way to active list. Likely
Jquery:
<script>
$('.nav-sidebar').on('click','li', function(){
$(this).addClass('active').siblings().removeClass('active');
});
</script>
And one more thing you don't add .active class in your code. After that you have to wrap your css property like
<style>
.nav-sidebar li.active{
/*your css code here*/
}
</style>
You will write your code in your css file. Likely
.nav-sidebar li.active{
/*your code here*/
}
this ia also one of the way to active your current active menu.
I am using the jquery accordion source for my website and what happens when I scroll down is the accordion overlaps my header.
I haven't made any adjustments to the CSS code in the accordion class so I don't have much to show but I've read a lot of people complaining that the accordion source from jquery UI has this problem but I have not been able to find out what it is?
Any ideas? Thanks!
<script>
JQuery(document).ready(function(){
$("#accordion").accordion();
});
</script>
</a>
</div>
<nav class="nav">
<div class="padded">
<ul>
<li class="active"><a id="link1" class="nav-section1" href="#section1">About</a></li>
<li><a id="link2" class="nav-section2" href="#section2">Design</a></li>
<li><a id="link3" class="nav-section3" href="#section3">3D + Animation</a></li>
<li><a id="link5" class="nav-section5" href="#section5">Video Production</a></li>
<li><a id="link6" class="nav-section6" href="#section6">Contact</a></li>
<li class="scrollTop"><span class="entypo-up-open"></span></li>
</ul>
</div>
</nav>
<div class = "accordion">
<article>
<h1 id="section1">About</h1>
<p>Farman Pirzada is this one dude who's pretty awesome and there's a lot you should learn about him because I love him</p>
</p>
</article>
and here's the CSS
#accordion {
padding-left: 100px;
}
http://imgur.com/EaQOT0g
I have my navbar of links and when the user is on a page that corresponds to one of the links I want to change the background color of that link. For example, when the user is on the home page I want to change the background color of the home link. I tried with #navbar li a:current but that doesn't work.Is this possible with css?
html:
<div id="navbar">
<ul>
<li>Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
CSS:
#navbar li a.current {
background-color: #FFF;}
Your CSS is wrong. It should be #navbar li a.current {
background-color: #FFF;} You had a colon after a:current.
Your HTML should be like this:
<div id="navbar"><ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
<div id="navbar">
<ul>
<li class="current">Home</li>
<li>Services</li>
<li>About</li>
<li>Contact</li>
<li>Samples</li>
</ul>
</div> <!-- end of navbar div -->
Now create a background color for the class of "current". You'll have to apply that class with the backend logic. CSS cannot workout the logic by itself. It only handles the styles
You could use javascript(jQuery) like this:
var currenturl = window.location.pathname.split( '/' );
$('#navbar>li>a[href="'+currenturl[1]+'"]').css({background: 'some_color'})
If you want to accomplish this only with CSS, maybe you can use the parent's IDs:
<div id="parent1">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
<div id="parent2">
<div id="navbar">
<ul>
<li class="home">Home</li>
<li class="service">Services</li>
<li class="about">About</li>
<li class="contact">Contact</li>
<li class="sample">Samples</li>
</ul>
</div>
</div>
And then...
#parent1 li.home {
background: red;
}
#parent2 li.home {
background: black;
}
You could do this using Javascript/JQuery (although a server-side approach is probably better):
var currentPath = window.location.pathname;
var pageName = currentPath.substr(currentPath.lastIndexOf('/')+1); // "index.html", etc
$("a[href=" + pageName + "]").parent().css("background", "#FFF");
The above requires JQuery, but you can do something similar in pure Javascript:
var targets = document.querySelectorAll('a[href=' + pageName + ']');
if (targets.length > 0) {
targets[0].parentNode.style.background = "#FFF";
}
(Fiddle)
Offcourse it is possible with pure css3. You could give an id to all your 'li' s.
like ,
li id="sample"
then modify your anchor to
a href="index.html#sample"
use CSS :target selector
li:target{
// apply your styles here
}
simple
I got a menu and I would like to display the current page with different color of text, or a border bottom.
I know how to do this with different html files, though, the current website im working on, is on a single file, index.html. When I click on menu, it will scroll down to the specific tab.
Does anyone know any way of styling menu in a single file?
HTML:
<div id="menu">
<ul class="nav">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
CSS:
#menu ul li .a:hover {
color: #6D6D6D;
border-bottom: 2px solid #fcd017;
}
Currently I'm able to change it while hovering, but I would like to change it while i remain in the #section1 in this case.
<script type="text/javascript">
var backcolor = [
"#aaaaaa",
"#bbbbbb",
"#cccccc",
];
function changeBGcolor(whichcolor)
{
if (document.body)
{
document.getElementById('menu').style.backgroundcolor = '(' + backImage[whichcolor] + ')';
}
}
</script>
<div id="menu">
<ul class="nav">
<li>aaa</li>
<li>bbb</li>
<li>ccc</li>
<li>ddd</li>
<li>eee</li>
</ul>
</div>
Try this sometimes it will be work