I need a navigation menu for a page I'm making and I would like to change the active link when someone clicks on it. I already have styles on the active link but I dont know how to make it change. Having it change when someone hovers over it would also be great. Javascript is alright. Thank you.
Menu
<div class="row">
<div class="small-12 medium-12 large-3 columns">
<a class="logo" href="/">Saul Designs</a>
</div>
<div class="large-7 columns">
<nav class="main-nav show-for-large-up">
<ul>
<!-- below this is what i need to have change-->
<li><a class="active" href="#start">START</a></li>
<li>ABOUT</li>
<li><a href="#work" >WORK</a></li>
<li>CONTACT</li>
<!-- and above this -->
</ul>
</nav>
</div>
<div class="large-2 columns">
<div class="normal-button alternate show-for-large-up">
HIRE ME
</div>
</div>
</div>
You can use the anchor for styling stuff in css3. The Problem here is that you have to specify matching ids to every anchor you have.
So you have to write:
<li><a id="start" href="#start">START</a></li>
<li><a id="about" href="#about">ABOUT</a></li>
<li><a id="work" href="#work" >WORK</a></li>
<li><a id="contact" href="#contact">CONTACT</a></li>
Then you have to add 4 stylerules, too:
#start:target, #about:target, #work:target, #contact:target{
background:#555; /* or as you want... */
}
This way it should work without any additional javascript.
I don't like this way because you have to specify every id and you are polluting the css-space. But I don't know another way using only html and css.
Related
I am using a CSS framework called Bulma and I am trying to implement a search bar in the Bulma navigation bar. I am trying to add the autocomplete functionality to the search bar. So, right below the input field, I added a panel-block (which is somewhat similar to bootstrap list groups):
<input class="input" type="text" placeholder="Text input">
<ul>
<li><a class="panel-block" href="#">Lorem</a></li>
<li><a class="panel-block" href="#">Ipsum</a></li>
<li><a class="panel-block" href="#">Dolor</a></li>
<li><a class="panel-block" href="#">Sit</a></li>
<li><a class="panel-block" href="#">Amet</a></li>
</ul>
But because this unordered list is still part of the navigation bar, the navigation bar wraps all of these list items, which makes the navigation bar bigger. Here is the content of my navbar:
<nav class="navbar is-light" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="https://bulma.io">
<img src="https://bulma.io/images/bulma-logo.png" alt="Bulma: a modern CSS framework based on Flexbox" width="112" height="28">
</a>
<button class="button navbar-burger">
<span></span>
<span></span>
<span></span>
</button>
</div>
<div class="navbar-end">
<div class="navbar-item field">
<div class="control">
<input class="input" type="text" placeholder="Text input">
<ul>
<li><a class="panel-block" href="#">Lorem</a></li>
<li><a class="panel-block" href="#">Ipsum</a></li>
<li><a class="panel-block" href="#">Dolor</a></li>
<li><a class="panel-block" href="#">Sit</a></li>
<li><a class="panel-block" href="#">Amet</a></li>
</ul>
</div>
</div>
</div>
</nav>
I tried adding style="overflow: hidden;" to the root <nav> element. Didn't work. How can I show the list items without having the navbar enlarged?
A complete demo can be found on this JSFiddle (Please reduce the size of the left column of JSFiddle to see it in desktop view).
If you want the list to break out of its parent container, you could set the position to absolute and the width to 100% (provided that the parent container has a position of relative).
Example here: http://jsfiddle.net/wn03dsj8/2/
I have this plunkr,
http://plnkr.co/edit/AEYQpvmjUR6DUq2jtYid?p=preview
Part of My html code:
<body ng-app="App" ng-controller="mainController">
<form name="myForm1" style="align-content:center;">
<div id="divTabs" >
<h4>CMA Analysis/Assessment</h4>
<ul class="nav nav-tabs" id="tabs" style="border-bottom: none;">
<li class="active">
<a data-toggle="tab" href="#AwarenessMenu">Awareness</a>
</li>
<li>
<a data-toggle="tab" href="#UnderstandingMenu">Understanding</a>
</li>
<li>
<a data-toggle="tab" href="#AcceptanceMenu">Acceptance</a>
</li>
<li>
<a data-toggle="tab" href="#CommitmentMenu">Commitment</a>
</li>
<li>
<a data-toggle="tab" href="#AdvocacyMenu">Advocacy</a>
</li>
<li class="next-tab">
Next >
</li>
</ul>
</div>
<div id="divAlltabContent" class="tab-content" >
<div id="AwarenessMenu" class="tab-pane fade in active">
AwarenessMenu
</div>
<div id="UnderstandingMenu" class="tab-pane fade in active">
UnderstandingMenu
</div>
<div id="AcceptanceMenu" class="tab-pane fade in active">
AcceptanceMenu
</div>
<div id="CommitmentMenu" class="tab-pane fade in active">
CommitmentMenu
</div>
<div id="AdvocacyMenu" class="tab-pane fade in active">
AdvocacyMenu
</div>
</div>
</form>
</body>
Problem is that in my application I am able to click next button to navigate the tabs but when I click on the "tab" e.g Understanding, screen goes blank.
How it runs on my application:
I can click on CMA tab. On click, the Awareness, understanding, acceptance ... tabs are shown. By default only Awareness's contents are shown (but not in plunkr, not sure why, it is showing everything).
On click on next I can navigate the tabs without any page refresh (cannot navigate in plunkr :/)
Real question:
I need to be able to click on any tab to show the content of the clicked tab. Next button should also work.
Would appreciate a lot for help on this.
I added the full js in plunkr instead of references because it wasn't working properly.
You need to change
href="#AwarenessMenu"
to
data-target="#AwarenessMenu"
You have to understand the route,when,ng-view for doing this.
So what I am trying to do is a form which is due to its length displayed over multiple pages. To realise this I am using different div's beeing displayed seperatly on one html page.
I am using angularJS and Bootstrap with this little piece of code:
It doesn't matter how I load this code. It's not working as first thing in a index.html file nor being loaded as a template with angularJS.
<div ng-controller="uploadCtrl">
<ul class="nav nav-tabs">
<li class="active"><a data-toggle="tab" data-target="#part1">Start</a></li>
<li><a data-toggle="tab" data-target="#part2">Step 2</a></li>
<li><a data-toggle="tab" data-target="#part3">Finish</a></li>
</ul>
<div class="tab-content">
<div id="part1" class="tab-pane fade in active">
<h3>Form part 1</h3>
<p>Some content.</p>
</div>
<div id="part2" class="tab-pane fade">
<h3>Form part 2</h3>
<p>Some content in menu 1.</p>
</div>
<div id="part3" class="tab-pane fade">
<h3>Form part 3</h3>
<p>Some content in menu 2.</p>
</div>
</div>
</div>
My problem is I can only click once on the links in the nav. There seems to be a problem with the toggle-function of class="active". Clicking on a link adds the active-class but it is never removed.
After clicking on every link they all look like this: <li><a data-toggle="tab" data-target="#part1" class="active" aria-expanded="true">Form part 1</a></li>
Plus none of my <li> are of class="active" after the first link-selection.
I am only using
jquery.min.js
bootstrap.min.js
bootstrap.min.css
npm.min.js
angular.min.js
I strongly recommend you to use angular-ui bootstrap for this. It has a special case for nested forms. Using bootstrap.js over angular that already provides DOM manipulations is a bit redundant and can cause unexpected behaviour.
<form name="outerForm" class="tab-form-demo">
<uib-tabset active="activeForm">
<uib-tab index="0" heading="Form Tab">
<ng-form name="nestedForm">
<div class="form-group">
<label>Name</label>
<input type="text" class="form-control" required ng-model="model.name"/>
</div>
</ng-form>
</uib-tab>
<uib-tab index="1" heading="Tab One">
Some Tab Content
</uib-tab>
<uib-tab index="2" heading="Tab Two">
More Tab Content
</uib-tab>
</uib-tabset>
</form>
More info here
There seems to be something wrong with my libraries.
I switched to Bootstrap Version 3.3.6 and it worked perfectly. Earlier I used the current Version 4.0.0 from Bootstraps Homepage given through the standard download option.
I have a simple div with bunch of list items that I need to set their background with javascript? any help would be highly appreciate it, let say I have url1, url2, url3, url4?
<div class="banner">
<ul>
<li style="background-image: url('img/sunset.jpg');">
<div class="inner">
<h1>The jQuery slider that just slides.</h1>
<p>No fancy effects or unnecessary markup, and it’s less than 3kb.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/wood.jpg');">
<div class="inner">
<h1>Fluid, flexible, fantastically minimal.</h1>
<p>Use any HTML in your slides, extend with CSS. You have full control.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
<li style="background-image: url('img/subway.jpg');">
<div class="inner">
<h1>Open-source.</h1>
<p>Everything to do with Unslider is hosted on GitHub.</p>
<a class="btn" href="//github.com/idiot/unslider">Contribute</a> </div>
</li>
<li style="background-image: url('img/shop.jpg');">
<div class="inner">
<h1>Uh, that’s about it.</h1>
<p>I just wanted to show you another slide.</p>
<a class="btn" href="#download">Download</a> </div>
</li>
</ul>
</div>
My suggestion here would be to create separate CSS classes for each of the background image styles you want. Then you can use a library like jQuery to addClass to any HTML element. Here's the jQuery documentation: addClass
Ideally, you want to avoid convoluting your CSS with JavaScript code and as much as possible, keep these two separate from each other.
I try make a transition fade page with div content, this is my horizontal header menu
<ul id="navigation" class="select">
<div id="teste">
<li><a id="link-home" href="#home">Home</a></li>
<li><a id="about" href="#about">about</a></li>
<li><a id="contact" href="#contact">contact</a></li>
</div>
and this is the example of content
<div id="home">
<h2>this is home</h2>
</div>
<div id="about">
<h2>this is about</h2>
</div>
<div id="contact">
<h2>this is contact</h2>
</div>
I need that #home is showing the homepage, and other hidden, when you click on the link to use the fade effect to the next page (which is the case in div) .
what is the best way? css3 or jquery? or both? Can someone help me make this script?
If I understand your question correctly, you want the navigation to fade in the new content rather than linking to a different page. In that case, either CSS3 or jQuery could work, but I would recommend jQuery because it is browser backwards compatible. Anything older that IE 9 will not interpret the CSS3 transitions. Plus, there is not a good way to detect clicks in CSS3 (see this question), so you'd end up using jQuery there anyway. Here is the code:
Menu:
<ul id="navigation" class="select">
<div id="test">
<li><a id="link-home" href="#">Home</a></li>
<li><a id="link-about" href="#">about</a></li>
<li><a id="link-contact" href="#">contact</a></li>
</div>
</ul>
Content:
<div id="home">
<h2>This is home.</h2>
</div>
<div id="about">
<h2>This is about.</h2>
</div>
<div id="contact">
<h2>This is contact.</h2>
</div>
jQuery:
$(document).ready(function () {
var animTime = 600;
$("#about").hide();
$("#contact").hide();
$('#link-home').click(function() {
$("#about").fadeOut(animTime);
$("#contact").fadeOut(animTime);
$("#home").delay(animTime).fadeIn(animTime);
});
$('#link-about').click(function() {
$("#home").fadeOut(animTime);
$("#contact").fadeOut(animTime);
$("#about").delay(animTime).fadeIn(animTime);
});
$('#link-contact').click(function() {
$("#home").fadeOut(animTime);
$("#about").fadeOut(animTime);
$("#contact").delay(animTime).fadeIn(animTime);
});
});
This should work with any code you already have. Just make sure your ids in the markup match the ids in the jQuery and you will be good to go. If you want to adjust the fade in time, just change the value of animTime. This number measures the animation time in milliseconds. The actual time the animation takes will be double the animTime because the other div's are animated out and then the new one is animated in.