I'm using the twitter bootstrap navbar and I want the active class to change when I go to another page but it just stays on the home page.
Here is the html on the master page
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav" style="font-size: medium; color: white;">
<li class="active">Home</li>
<li>Connect</li>
<li>Develop</li>
<li>Marketplace</li>
<li>
<asp:LoginView ID="LoginView1" runat="server">
<AnonymousTemplate>
</AnonymousTemplate>
<LoggedInTemplate>
Welcome <asp:LoginName ID="LoginName1" runat="server" />
</LoggedInTemplate>
</asp:LoginView>
<asp:LoginStatus runat="server"></asp:LoginStatus>
</li>
</ul>
</div>
I found an answer that said to use this
$('.navbar li').click(function (e) {
$('.navbar li.active').removeClass('active');
var $this = $(this);
if (!$this.hasClass('active')) {
$this.addClass('active');
}
e.preventDefault();
});
But I tried it and it doesn't work. I have the js files in there
<script src="jquery/src/jquery.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/offcanvas.js"></script>
And the relevant css files are there but it still doesn't do anything.
Seems like you don't use ajax to load page when clicking to link. If It is so, the problem is that after you set 'active' class, the page reloads and it is all new. You need to decide which li will be active in your backend code or detect in javascript, what page are you currently in.
UPD:
The javascript method would look something like that
if (location.pathname.match(/connect.aspx/i)) $('a[href="Connect.aspx"]').parent().addClass('active')
if (location.pathname.match(/develop.aspx/i)) $('a[href="Develop.aspx"]').parent().addClass('active')
etc.
But this is kludge pretty much.
The better solution would be adding class="active" to needed <li> when generating page. But I don't know how your pages are generated so I cannot show example. If you use just different html files, just edit them so different <li>s have active class. If you use template engine, or something else, use its methods.
I fixed this issue by overriding the bootstrap dropdown-menu class in my CSS file:
.dropdown-menu > li.active > a {
background: white !important;
color: black !important;
}
.dropdown-menu > li.active > a:hover, .dropdown-menu > li.active > a:focus {
background: $navbar !important;
color: white !important;
}
Related
I have tried for months to find away of connecting my menu, but frustratingly I've had no luck. I don't know what else I can try so I want to ask you guys if you can help. I searched around here on Stack for an idea, this someway to describe the function I want but I'd like to utilise the data-attribute way instead of href and I want to use the on click function instead of the hover, as it's for desktop and mobile. I also want to close the submenu with the menu a on desktop version, would toggle be an option?
link: jquery dropdown with separate container
html
<div class="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
</ul>
</div>
<div class="submenu">
<ul>
<li class="one">content1</li>
<li class="two">content2</li>
<li class="three">content3</li>
</ul>
</div>
content from submenu ul li is set to height:0 that I want to set to auto when triggered, or maybe add a class to the submenu ul li:
.submenu ul li{
display:block;
overflow:hidden;
height:0;
.submenu ul li.active{
height:auto;
}
JS Fiddle
I'm not sure if this is what you want, but try replacing
$(this).attr('data-section').slice(1)
with this
$(this).attr('data-section')
jsfiddle (based in yours)
Just remove the .slice(1). I don't know why you add this one.
when you click on the menu link, jquery will remove active class from list and it will added to a new link related to menu link by data-section.
I'm looking to make a very simple dropdown menu for a navbar, very similar to how Bootstrap's dropdown menu works - without being Bootstrap (with some regular links in my navbar and some dropdown links). Essentially what I want is to come up with some with some js and probably a little bit of CSS that will enable this to happen for the following HTML code:
<ul class="main-nav">
<li>HOME</li>
<li>CONTACT</li>
<li class="dropdown">
ACCOUNT <b class="caret"></b>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
I just don't really know where to start on something like this. I spent a few hours trying to put together an all-CSS way of doing this but my CSS just started interfering with itself and I kind of gave up on that. I don't really know any js but it strikes me that there should be a really easy way to toggle a dropdown style on and off with js by clicking a link. I even tried for quite a while to implement js dropdown scripts other people have put out and other StackOverflow answers that essentially did that but their HTML was structured significantly different than mine and I didn't know enough js to restructure their code.
At this point, I'd be more than content with the simplest way possible - a dropdown link that when clicked, opens up a single-colored rectangle 'under it' with the links stacked within in it. I know that's a lot to ask for, but if anyone could point me in the right direction, it would be much appreciated. I apologize for not showing more code but after working on this all day, I really just don't have anything useful to show for.
The idea is that the dropdown-menu is hidden using display: none and when its parent dropdown has the class open then you show it using display: block, to toggle the classes we use js.
$(document).ready(function(){
$("[data-toggle='dropdown']").click(function(e) {
$(this).parents(".dropdown").toggleClass("open"); /*when you click on an element with attr data-toggle='dropdown' it toggle the class "open" on its parent with class "dropdown"*/
e.stopPropagation();
});
$("html").click(function() {
$(".open").removeClass("open"); /*when you click out of the dropdown-menu it remove the class "open"*/
});
});
.main-nav{
background: deepskyblue;
padding: 0;
}
.main-nav li{
list-style: none;
display: inline-block;
position: relative; /*with respect to this element dropdown-menu is positioned*/
}
.dropdown-menu{
display: none; /*hide the menu*/
/*this style are just to position the menu*/
position:absolute;
top: 100%;
left: 0;
}
.open .dropdown-menu{
display: block; /*show the menu when its parent has class "open"*/
}
a.nav-item{
display: inline-block;
padding: 10px;
text-decoration: none;
cursor: pointer;
}
.dropdown-menu{
background: skyblue;
padding: 10px;
border-radius: 5px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="main-nav">
<li><a class="nav-item" href="index.html">HOME</a></li>
<li><a class="nav-item" href="contact.html">CONTACT</a></li>
<li class="dropdown">
<a class="nav-item dropdown-toggle" data-toggle="dropdown">ACCOUNT <b class="caret">></b></a>
<ul class="dropdown-menu">
<li>CHANGE PASSWORD</li>
</ul>
</li>
</ul>
The above is just a basic example to point you in the right direction, most of the CSS code is just to make viable the example, the important parts are commented.
I'd like the functionality of the Bootstrap tabbable nav but I want to style each tab with a background image and text underneath. In fact, what I'd really like is to just put my photoshop images right in each tab and set the active state to my selected image.
I'm having a very difficult time doing this. Is it going to take a lot of custom work to get this working with this component?
I thought I could just try with some CSS but it's not giving me the correct formatting I want:
ul.nav.nav-tabs li {
display:inline-block;
background:url(../images/skypeIcon.png) no-repeat left center;
background-size:20px auto;
font-size:15px;
padding:2px 0 2px 28px
}
By the way, I'm using Bootstrap 2.3 so I can't use Bootstrap 3 Navbar Generator.
I can use a div tag inside my a tag and put whatever content I want in there.
<ul class="nav nav-tabs">
<li class="active">
<a href="#tab1" data-toggle="tab">
<div>
<img src="<%=context%>/images/defaultAvatar.png"/>
<br/>
Computer
</div>
</a>
</li></ul>
I recently saw a very interesting effect I would like to create in a navbar for a website. The effect was a hover effect, used for links in a menu list. Instead of the typical "change the link when you hover over it" , it changes every OTHER link BESIDES the one you are hovering. In the example I saw when you hover over one link in the list, it applied an opacity fade to all the other links, leaving the link you are hovering over at full opacity.
now i've tried some css things that ive looked up, something like this:
.menu-link:a + .menu-link {opacity: 0.7;}
...but that only achieved the effect for the link next to it , not all links with the same class. I'm assuming this can be achieved with javascript but im such a noob I cannot figure it out.
So could anyone help me figure out how to code up a quick function like this in either jquery or javascript? something that looks for a hover on an object with a specific class and then having an effect (such as lowering opacity) performed on all other objects with that class? Thanks for any help!
EDIT: okay i was asked to provide some code. this is the "menu of links" i have been working on, the are just a series of unordered lists that show up in a header div at the top of the page:
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Blog</h4>
<ul>
<li><a class="menu-link" href="#">Archive</a></li>
<li><a class="menu-link" href="#">Search</a></li>
<li><a class="menu-link" href="#">Tag Cloud</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Profile</h4>
<ul>
<li><a class="menu-link" href="#">Artist Profiles</a></li>
<li><a class="menu-link" href="#">Submit A Profile</a></li>
</ul>
</div>
</div>
<div class="col-lg-2 col-md-2 menu-border">
<div class="menu-list">
<h4 class="list-title">Connect</h4>
<ul>
<li><a class="menu-link" href="#">SoundCloud</a></li>
<li><a class="menu-link" href="#">linkedIN</a></li>
</ul>
</div>
</div>
they are just a few sub menus; however i have given all the links in all the sub menus a class ("menu-link") and I'm trying to figure out how to make a function that when hovering over one link with the "menu-link" class, all other links with that class do something (in my particular case i want them to fade to a > 1 opacity )
Using jQuery, you could do something like this:
jQuery
$('a.menu-link').hover(function(){
$('a.menu-link').not(this).toggleClass('toggle');
})
CSS
.toggle {
opacity: 0.7;
}
Here is a fiddle of it in action: http://jsfiddle.net/HMq67/
Using toggleClass() and not() you can change the style of every element that is not the one you are hovering over.
Give this jsFiddle a try. If nothing else, it should get you going.
In essence, you will need javascript to listen for the mousover and mouseout events. Then select all elements except the one you are currently hovering over.
$('nav li a').mouseover(function () {
$('nav li a').not($(this)).addClass('hover');
});
$('nav li a').mouseout(function () {
$('nav li a').not($(this)).removeClass('hover');
});
4 years later...lol.
You can achieve this with simple CSS!
For the code you provided above it would look like this:
.menu-list ul:hover .menu-link {
opacity: 0.7;
}
.menu-list ul:hover .menu-link:hover {
opacity: 1;
}
.menu-list ul li a {
display: block;
}
Fiddle: https://jsfiddle.net/fz6bumxx/6/
Note - I'm setting the a tags within each list items to block so that you can't trigger the link fades without hovering over one of the links.
Hope this helps!
<div id="menu">
<ul><li>SocialSpot</li>
<li>Profile</li>
<li>Latest</li>
<li>Settings</li>
<li>Logout</li>
</div>
</ul>
I have this in a webpage. I have css aligning them. However I want the logout button to be aligned to the right but on the same bar. How can I do this without having them all aligned to the right?
CSS:
ul { overflow:auto; }
li { float:left; }
li:last-child { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/
Btw the :last-child pseudo-class does not work in IE8 (and below). If you want it to work in those browsers, you will have to assign a class (e.g. right) to the Logout LI item, and then:
li.right { float:right; }
Live demo: http://jsfiddle.net/simevidas/Rs4Sa/1/
You might want float: right on the css for the logout link.
Like this? http://jsfiddle.net/QAjkP/
You can use an id tag to specify the css properties for that one <li> item