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>
Related
I have a problem I've been trying to work out for over a week. I have been editing a premade template for its header and footer elements. I used Bootstrap 3 for the rest because the template was Bootstrap 3. I've since found out that Bootstrap 3 did not support sub menus on the mobile nav.
The problem is with the mobile nav. The links with sub menus can only be opened by clicking on an icon to the right of the link (LINK icon). Clicking on the link itself does not open the sub menu. The icon is so ugly (even when I changed out fontello for font awesome) and shifts the link off centre. Plus it's such a small area to click on. I tested it with a few friends and they tried clicking on the links before finding that they had to click on the icon.
I've tried editing the JS code but, because I'm no expert, that did not work. I even tried using display:none for hide/unhide on one of the li elements using media queries; but that only works for one link.
The mobile nav is vertical and centred.
Below is the JS code.
var $menu = $('.nav-menu', '#primary-navigation');
// add classes
$menu.find('li').each(function() {
if($(this).children('ul').length) {
$(this).addClass('has-submenu');
$(this).find('>a').after('<span class="submenu-toggle"></span>');
}
});
var $submenuTrigger = $('.has-submenu > .submenu-toggle');
// submenu link click event
$submenuTrigger.on( "click", function() {
$(this).parent().toggleClass('active');
$(this).siblings('ul').toggleClass('active');
});
And here is the html
<nav id="primary-navigation" class="site-navigation primary-navigation" role="navigation">
<a class="menu-toggle"><span class="lines"></span></a>
<div class="nav-menu">
<ul>
<li>Home</li>
<li>Explore
<ul>
<li>Languages</li>
<li>Gallery</li>
<li>Glossary</li>
</ul>
</li>
<li>About
<ul>
<li>About</li>
<li>Questions & Answers</li>
</ul>
</li>
<li>Blog</li>
<li>Contact</li>
</ul>
</div>
</div>
Here is the css
.submenu-toggle:before {
font-family: "Font Awesome 5 Free";
content: "\f0d7";
color:#fff;
font-size: 15px;
font-weight: 900;
display: inline-block;
width: 26px;
line-height: 24px;
text-align: center;
margin-left: -8px;
margin-bottom: 8px;
cursor:pointer;
}
.active > .submenu-toggle:before {
font-family: "Font Awesome 5 Free";
content: "\f0d8";
}
If anyone can help, that would be great. It's okay if both the link and icon are clickable, but having the link clickable, or having the click area of the icon extending over the link, is the most important.
Thanks :)
You are correct - Bootstrap 3 do not support sub menus on the mobile nav. Which is why you should handle it yourself.
By following your logic the trigger should be:
var $submenuTrigger = $('.has-submenu > .submenu-toggle, .has-submenu > a');
There is a little hack you need to add as well:
$('.nav-menu > ul').on('click', function(event) {
event.stopPropagation();
});
This is needed to prevent the event bubbling which is used by Bootstrap - in other words you disable Bootstrap for the sub items to enable your code.
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.
At the top of my webpage I have all of my links laid out horizontally as such:
Link 1 Link 2 Link 3 etc...
What I'm trying to do is, when you click on Link 1 for example, a border-bottom:1px solid #000 gets added to the css. If I were to click link 2, then the border-bottom on link one would be set to 'none' and the border-bottom:1px solid #000 would be set on link two.
I guess what I'm trying to ask is, how do I add an onclick handler to all of the links in my menu bar? So that, a "selected" class would be added to the link for the current page, and when I click another link, that class is removed and added onto the next link.
I've tried using javascript but I'm unable to remove the selected class after I've added it. Any suggestions on how to accomplish this?
Something like this?
<ul id="nav">
<li><a class="menu" href="#">1</a></li>
<li><a class="menu" href="#">2</a></li>
<li><a class="menu" href="#">3</a></li>
</ul>
then
$('a.menu').click(function(){
$('a.menu').removeClass("active");
$(this).addClass("active");
});
then in your css something with that active class
.active{
border-bottom: 1px solid #ccc;
}
You can use jQuery:
Add this into onclick inside that
$("#id").addClass("classname");
<style>
#id {
height: 20px;
width: 20px;
}
.classname {
display: none;
}
</style>
Link 1
<div id="id"></div>
I'm trying to make a menu that opens to the right side of the the div that's clicked to activate it. However, I don't understand how I can do the positioning correctly. I would like the bottom of the last li (where I store the submenu options) to be even with the bottom of the div that activates the popout. However, giving is a negative margin
ul.dd{
z-index:100;
position:relative;
margin-bottom:-30px;
display:none;
}
isn't working out. How can I accomplish this
http://jsfiddle.net/mBPfG/1/
Thanks!
Your container div was preventing the hidden <ul> tag from floating to the right of the other. Also added a negative margin-top to adjust positioning.
I have updated the jsfiddle.
I simply added:
.dd_container { width:600px; }
ul.dd{
z-index:100;
position:relative;
margin-top:-60px;
display:none;
}
However, I would suggest nesting your second <ul> within the first <li>.
I have modified the HTML and CSS completely to have a more symatically correct answer.
<div id="dd_container" class="dd dd_container">
<ul class="dd_deploy">
<li>more options -->
<ul class="dd">
<li>el1</li>
<li>el2</li>
<li>el3</li>
</ul>
</li>
</ul>
<div class="cb"></div>
Less markup is better
View the full jsfiddle.
Using twitter bootstrap. on the site i have a top nav bar consisting of links where some have dd-menus, and some are just static links.
i'm constructing the links using img's instead of text anchors.
i would like to get a hover effect applied to each of the links in the nav bar. this to be done by swapping out the image or loading a different background location in the sprite.
i'm using the regular way of specifying the nav bar,
<ul class="nav nav-pills">
<li class="dropdown" id="hifiMenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="$PRE/images/newhifi.png"></a>
<ul class="dropdown-menu">
<li class="mainitem">BY BRAND</li>
is it possible to put a hover on the A link for #hifiMenu, and when the dropdown is activated, have the image swapped out?
not quite sure what the best practice would be using TB's nav bar control. has anyone tried something like this?
thanks in advance.
as mentioned in my question, i have the following nav bar items:
<ul class="nav nav-pills">
<li class="dropdown" id="hifiMenu">
<a class="dropdown-toggle" data-toggle="dropdown" href="#hifiMenu"><img src="newhifi.png"></a>
<ul class="dropdown-menu">
<li class="mainitem">BY BRAND</li>
....
in order to get the hover to work, i first created a large sprite image that contained every normal/highlighted image.
then i set up a new style for each of my links:
#hifiMenuLink {
width:71px;
height: 11px;
background-image: url(path_to_sprite);
background-repeat: no-repeat;
background-position: 0px -6px;
}
then for the hover:
#hifiMenuLink:hover {
width:71px;
height: 11px;
background-image: url(path_to_sprite);
background-repeat: no-repeat;
background-position: 0px -37px;
}
then i assigned the ID, hifiMenuLink, to the anchor itself...
<a id="hifiMenuLink" ...
that was my quick and dirty solution.
hope this can help out someone else in the future.