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.
Related
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've tried lots and it still won't style! My css looks like this:
#subnav {
background: url(../_img/subnav.png);
height: 36px;
width: 455px;
margin: -15px 0 0 25px;
position: absolute;
}
.subnav {
font-family: verdana;
font-size: 6px;
color: #676767;
padding: 8px;
}
and my html looks like:
<div id="subnav" class="subnav">
testing 123
</div>
and it looks this way:
Side-Note: I was wondering what's the most efficient way of coding that navigation with the sub-nav? I'm kind of outdated with my html/css at the moment.
"the white bit in the picture above is my sub-nav and the blue bit is the navigation so upon click options are shown in the white bit"
LAYOUT: http://uploadir.com/uploads/v8qafb1w/downloads/new
The content of the image that you showed us is different to the content that you have present in the question.
You have sn as your class in your html and you are trying to reference subnav via css
To add a sub menu I would personally use the following.
<ul>
<li>
itsHabbo
</li>
<li>
Radio
<ul>
<li>
AM
</li>
<li>
FM
</li>
</ul>
</li>
<li>
Events
</li>
<li>
Forum
</li>
So you basically have you sub menu within the item you wish to select.
I hope this helps.
You have sn class not subnav. I changed to sn in you code and you can now see styling
<div id="subnav" class="sn"> come at me bro </div>
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>
This is a tricky question to phrase but I'll try my best:
If you go to http://msukkar.tumblr.com and resize your window (if you're using a desktop/laptop) until the hamburger menu icon appears then click on it to get the drop-down menu, click on it again to hide it. You'll find that when you resize your window back up full-width the original navigation is gone.
I'm curious as to how I can prevent this exactly. I'm adept at HTML & CSS but very new to Javascript.
The Javascript that I used is:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script>
<script type="text/javascript">
jQuery(document).ready(function ($) {
/* prepend menu icon */
$('#menu_wrapper').prepend('<img id="mobile_menu" src="http://msukkar.com/wp-content/themes/pptitan/images/mobile_menu.png" alt="">');
/* toggle nav */
$("#mobile_menu").on("click", function () {
$("#menu_border_wrapper").slideToggle();
$(this).toggleClass("active");
});
});
});
</script>
The HTML for the menu is
<div id="menu_wrapper">
<!-- Begin logo -->
<a id="custom_logo" class="logo_wrapper" href="http://msukkar.com" style="font-family: 'Oswald', sans-serif; letter-spacing: 1px; font-size: 14px; margin-top: 16px; ">
MATT SUKKAR
</a>
<!-- End logo -->
<!-- Begin main nav -->
<div id="nav_wrapper">
<div class="nav_wrapper_inner">
<div id="menu_border_wrapper">
<div class="menu-home-container">
<ul id="main_menu" class="nav">
<li id="menu-item-1235" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.tumblr.com" style="color: #ff0000">
Blog
</a>
</li>
<li id="menu-item-1485" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-1235">
<a href="http://msukkar.com/contact/">
Contact
</a>
</li>
</ul>
</div>
<select>
<option selected="selected" value="">
- Main Menu -
</option>
<option selected="selected" value="http://msukkar.tumblr.com">
Blog
</option>
<option value="http://msukkar.com/contact/">
Contact
</option>
</select>
</div>
</div>
</div>
I hope I explained that well enough for you all. Thanks in advance for your help and if need be I'll try to clarify further.
Here's your problem:
$("#menu_border_wrapper").slideToggle();
Which shows and hides your menu when you click the hamburger.
The problem is that when you are in desktop view, your entire menu is contained within #menu_border_wrapper and is displayed as it should. Then you resize down to mobile and click the hamburger. On your first click, #menu_border_wrapper slides down and your menu becomes visible. On your second click, #menu_border_wrapper slides up and your menu becomes invisible. This is fine on mobile since the hamburger icon itself isnt contained within #menu_border_wrapper, but when you resize the window back to desktop, the menu is gone! Remeber how on the second click the menu was sliding up and was set to display: none. Well now since your desktop size menu is contained within #menu_border_wrapper, it's not there anymore.
There are probably a lot of ways you can solve this. Move the actual menu buttons outside #menu_border_wrapper on desktop aswell, make two completely unique menues for mobile and desktop or set #menu_border_wrapper to display: block !important on desktop.
Hope it helps!
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;
}