Some web page links not working - javascript

Hello am using the Twitter-Bootstrap framework to develop a website for a client but I have hit a wall and I don't know what may be causing It. Before I go any further I will throw in my html and css code then explain the problem.
#import url('https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css');
#import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.6.1/css/font-awesome.min.css');
body {
font-family: Montserrat, "Helvetica Neue", Helvetica, Arial, sans-serif;
}
a {
text-decoration: none;
-webkit-transition: all 0.3s ease-in;
-moz-transition: all 0.3s ease-in;
transition: all 0.3s ease-in;
}
/* TOP OF THE PAGE */
#header {
float: left;
width: 100%;
position: relative;
z-index: 999;
}
.topbar-section {
float: left;
width: 100%;
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
.top-social {
float: left;
width: 100%;
}
.top-social a {
font-size: 14px;
color: #777;
line-height: 50px;
}
.top-social ul {
padding: 0;
margin: 0;
list-style: none;
}
.top-social ul li {
float: left;
padding: 0;
width: 50px;
border-left: 1px solid #ccc;
}
.top-social ul li.last {
border-right: 1px solid #ccc;
}
.top-social ul li a {
text-align: center;
display: block;
text-decoration: none;
}
.top-social a.email {
font-weight: 400;
float: left;
padding: 0 0 0 20px;
text-decoration: none;
}
.logo-section {
float: left;
width: 100%;
}
strong.logo {
float: left;
margin: 0;
padding: 20px 30px 20px 0;
}
strong.logo a {
font-size: 18px;
text-transform: uppercase;
}
.book-section {
float: right;
width: 100%;
padding: 15px 0;
}
.number-box {
float: left;
padding: 0 30px 0 0;
}
.number-box span {
color: #777;
display: block;
padding: 0;
}
.number-box strong {
font-size: 24px;
font-weight: 700;
color: #222;
display: block;
}
div.btn-book-box {
padding: 10px 0 0;
}
div.btn-book-box a.btn-book {
padding: 10px 15px;
font-size: 18px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
background-color: #9bc83c;
}
div.btn-book-box a.btn-book:hover {
background: none;
border: 1px solid #444;
color: #222;
}
/*.navigation*/ .navbar {
border-radius: 0;
}
/*.navigation */.navbar-inverse {
background-color: transparent;
border-color: transparent;
}
/*.navigation */.navbar-inverse .navbar-collapse {
border-color: #ccc;
}
.nav-outer {
background: #fff;
border: 1px solid #999;
float: left;
width: 100%;
-moz-box-shadow: 0 0 4px rgba(0,0,0,0.1);
-webkit-box-shadow: 0 0 4px rgba(0,0,0,0.1);
box-shadow: 0 0 4px rgba(0,0,0,0.1);
}
<div id="header">
<div class="topbar-section">
<div class="container">
<div class="col-md-6">
<div class="top-social">
<ul>
<li><i class="fa fa-google-plus"></i></li>
<li><i class="fa fa-twitter"></i></li>
<li><i class="fa fa-linkedin"></i></li>
<li class="last"><i class="fa fa-facebook-f"></i></li>
</ul>
<a href="mailto:" class="email" title="Send us an email">
<i class="fa fa-envelope-o"></i> info#prideafricasafaris.com</a>
</div>
</div>
</div>
</div>
<div class="logo-section">
<div class="container">
<div class="col-md-6">
<strong class="logo">Pride Africa Safaris </strong>
</div>
<div class="col-md-6">
<div class="book-section">
<div class="number-box">
<div class="number-text">
<span>Call us for any Query</span>
<strong><i class="fa fa-phone"></i> +256 7** 5** 6**</strong>
</div>
</div>
<div class="btn-book-box">
Book Now
</div>
</div>
</div>
</div>
</div>
<div class="navigation">
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle"
data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="nav-outer">
<div id="navbar" class="collapse navbar-collapse">
<ul class="nav navbar-nav" id="nav">
<li class="active">Home</li>
<li>About</li>
<li>Team</li>
<li>Trips</li>
<li>Events</li>
<li>Booking</li>
<li>Gallery</li>
<li>Testimonials</li>
<li>Contact</li>
</ul>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
Since now you have seen my code, The problem is when I include the div with the class navigation, the links within the top-social and logo-section divs remain static and non-reactive but when I remove the div with the class navigation, everything seems to work normally, what could be the issue here? Thanks In advance.

Why are you floating all your sections? They are floating over each other right now.
Remove the float property from your topbar-section div, your top-social div as well as your logo-section div and the elements will be clickable again.
Example for topbar-section:
.topbar-section {
float: left; <<-- REMOVE THIS
width: 100%; <<-- REMOVE THIS TOO
background: #f5f5f5;
border-bottom: 1px solid #ccc;
}
Link to jsFiddle: https://jsfiddle.net/AndrewL32/d9rpvkpg/3/
Also, I noticed that you're using float on certain other elements in your fiddle too. Remove them and keep only the one's which are necessary.
Do read this: https://developer.mozilla.org/en/docs/Web/CSS/float to understand how float works.

Take
float: left;
out of .topbar-section
Why do the parent elements have float: left?

Related

input field not being aligned center?

I Need your help
I am a beginner in web development
Can you explain why the input field is not aligning in center ?
<"input type="text" id="search_bar" class="form-control" placeholder="Search" align="center">
In the CSS I tried adding "float:center;" at multiple places in the CSS related to the input field but nothing seems to work at all.
here's the code :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Navbar Dropdown Login and Signup Form with Social Buttons</title>
<link href="https://fonts.googleapis.com/css?family=Varela+Round" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<style type="text/css">
body{
font-family: 'Varela Round', sans-serif;
margin:0px;
}
.form-control {
box-shadow: none;
font-weight: normal;
font-size: 13px;
}
.form-control:focus {
border-color: #33cabb;
box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.navbar-header.col {
padding: 0 !important;
}
.navbar {
background: #fff;
height: 60px;
padding-left: 10px;
padding-right: 16px;
border-radius: 0;
box-shadow: 0 0px 0px 0 rgba(0, 0, 0, 0.2), 0 0px 0px 0 rgba(0, 0, 0, 0.19);
}
.nav-link img {
border-radius: 50%;
width: 36px;
height: 36px;
margin: -8px 0;
float: left;
margin-right: 10px;
}
.navbar .form-inline {
display: inline-block;
}
.navbar .nav li {
position: relative;
}
.navbar .nav li a {
color: #888;
}
.search-box {
float: center;
}
.search-box input {
float: center;
border-color: #dfe3e8;
border-radius: 20px !important;
box-shadow: none;
}
.search-box .input-group-addon {
float: center;
min-width: 35px;
border: none;
position: absolute;
background: transparent;
right: 0;
z-index: 9;
padding: 7px;
height: 100%;
}
.search-box i {
color: #a0a5b1;
font-size: 19px;
}
.navbar .nav .btn-primary, .navbar .nav .btn-primary:active {
color: #fff;
background: #33cabb;
padding-top: 8px;
padding-bottom: 6px;
vertical-align: middle;
border: none;
}
.navbar .nav .btn-primary:hover, .navbar .nav .btn-primary:focus {
color: #fff;
outline: none;
background: #31bfb1;
}
.navbar .navbar-right li:first-child a {
padding-right: 30px;
}
.navbar .nav-item i {
font-size: 18px;
}
.navbar .dropdown-item i {
font-size: 16px;
min-width: 22px;
}
.navbar ul.nav li.active a, .navbar ul.nav li.open > a {
background: transparent !important;
}
.navbar .nav .get-started-btn {
min-width: 120px;
margin-top: 8px;
margin-bottom: 8px;
}
.navbar ul.nav li.open > a.get-started-btn {
color: #fff;
background: #31bfb1 !important;
}
.navbar .dropdown-menu {
border-radius: 1px;
border-color: #e5e5e5;
box-shadow: 0 2px 8px rgba(0,0,0,.05);
}
.navbar .nav .dropdown-menu li {
color: #999;
font-weight: normal;
}
.navbar .nav .dropdown-menu li a, .navbar .nav .dropdown-menu li a:hover, .navbar .nav .dropdown-menu li a:focus {
padding: 8px 20px;
line-height: normal;
}
.navbar .navbar-form {
border: none;
}
.navbar .dropdown-menu.form-wrapper {
width: 280px;
padding: 20px;
left: auto;
right: 0;
font-size: 14px;
}
.navbar .dropdown-menu.form-wrapper a {
color: #33cabb;
padding: 0 !important;
}
.navbar .dropdown-menu.form-wrapper a:hover{
text-decoration: underline;
}
.navbar .form-wrapper .hint-text {
text-align: center;
margin-bottom: 15px;
font-size: 13px;
}
.navbar .form-wrapper .social-btn .btn, .navbar .form-wrapper .social-btn .btn:hover {
color: #fff;
margin: 0;
padding: 0 !important;
font-size: 13px;
border: none;
transition: all 0.4s;
text-align: center;
line-height: 34px;
width: 47%;
text-decoration: none;
}
.navbar .social-btn .btn-primary {
background: #507cc0;
}
.navbar .social-btn .btn-primary:hover {
background: #4676bd;
}
.navbar .social-btn .btn-info {
background: #64ccf1;
}
.navbar .social-btn .btn-info:hover {
background: #4ec7ef;
}
.navbar .social-btn .btn i {
margin-right: 5px;
font-size: 16px;
position: relative;
top: 2px;
}
.navbar .form-wrapper .form-footer {
text-align: center;
padding-top: 10px;
font-size: 13px;
}
.navbar .form-wrapper .form-footer a:hover{
text-decoration: underline;
}
.navbar .form-wrapper .checkbox-inline input {
margin-top: 3px;
}
.or-seperator {
margin-top: 32px;
text-align: center;
border-top: 1px solid #e0e0e0;
}
.or-seperator b {
color: #666;
padding: 0 8px;
width: 30px;
height: 30px;
font-size: 13px;
text-align: center;
line-height: 26px;
background: #fff;
display: inline-block;
border: 1px solid #e0e0e0;
border-radius: 50%;
position: relative;
top: -15px;
z-index: 1;
}
.navbar .checkbox-inline {
font-size: 13px;
}
.navbar .navbar-right .dropdown-toggle::after {
display: none;
}
#media (min-width: 1200px){
.form-inline .input-group {
width: 300px;
margin-left: 30px;
}
}
#media (max-width: 768px){
.navbar .dropdown-menu.form-wrapper {
width: 100%;
padding: 10px 15px;
background: transparent;
border: none;
}
.navbar .form-inline {
display: block;
}
.navbar .input-group {
width: 100%;
}
.navbar .nav .btn-primary, .navbar .nav .btn-primary:active {
display: block;
}
}
.B{
margin-top: 0px;
height: 40px;
width:65px;
float: top;
margin-top: 10px;
display:inline-block;
}
.C{
display:inline-block;
}
</style>
<script type="text/javascript">
// Prevent dropdown menu from closing when click inside the form
$(document).on("click", ".navbar-right .dropdown-menu", function(e){
e.stopPropagation();
});
</script>
</head>
<body>
<nav class="navbar navbar-default navbar-expand-lg navbar-light">
<div class="navbar-header d-flex col"><img src="logo.png" class="B" alt="logo">
<button type="button" data-target="#navbarCollapse" data-toggle="collapse" class="navbar-toggle navbar-toggler ml-auto">
<span class="navbar-toggler-icon"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<!-- Collection of nav links, forms, and other content for toggling -->
<div id="navbarCollapse" class="collapse navbar-collapse justify-content-start">
<form class="navbar-form form-inline">
<div class="input-group search-box" align="center">
<input type="text" id="search_bar" class="form-control" placeholder="Search" align="center">
<span class="input-group-addon"><i class="material-icons">ξΆ¶</i></span>
</div>
</form>
<ul class="nav navbar-nav navbar-right ml-auto">
<li class="nav-item">
<a data-toggle="dropdown" class="nav-link dropdown-toggle" href="#">Login</a>
<ul class="dropdown-menu form-wrapper">
<li>
<form action="/examples/actions/confirmation.php" method="post">
<p class="hint-text">Sign in with your social media account</p>
<div class="form-group social-btn clearfix">
<i class="fa fa-facebook"></i> Facebook
<i class="fa fa-twitter"></i> Twitter
</div>
<div class="or-seperator"><b>or</b></div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<input type="submit" class="btn btn-primary btn-block" value="Login">
<div class="form-footer">
Forgot Your password?
</div>
</form>
</li>
</ul>
</li>
<li class="nav-item">
Sign up
<ul class="dropdown-menu form-wrapper">
<li>
<form action="/examples/actions/confirmation.php" method="post">
<p class="hint-text">Fill in this form to create your account!</p>
<div class="form-group">
<input type="text" class="form-control" placeholder="Username" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Password" required="required">
</div>
<div class="form-group">
<input type="password" class="form-control" placeholder="Confirm Password" required="required">
</div>
<div class="form-group">
<label class="checkbox-inline"><input type="checkbox" required="required"> I accept the Terms & Conditions</label>
</div>
<input type="submit" class="btn btn-primary btn-block" value="Sign up">
</form>
</li>
</ul>
</li>
</ul>
</div>
</nav>
</body>
</html>
Assuming here that you like to have the placeholder in the input field in the center.
If this is the case, try:
text-align: center;
Just place the input field within a block element and set that parent element to have text-align:center;.
That way you can control where you want the item to be positioned relative to the div (block element)
the navbar containing the form element should center its child elements.
.navbarCollapse{
text-align: center;
}
Use a different id for label and different id for textfield. Then you can easily manage them through css.

How to open submenus in a dropdown to the left

In the below drop down menu when we hover over the items, the submenu opens to the right. But, I want that it opens to the left instead.
Here the code:
html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">LARGE HOLDINGS</a>
<ul class="dropdown-menu third-menu">
<li class="dropdown-submenu active">LHO
<ul class="dropdown-menu parent third-menu">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Contact Us
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li>
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application
Support L1</font></li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Application Overview
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>LHO </b></font></br></br><font size=2> Web Application to track large equity
holdings and, where appropriate, report to regulators. It is owned by the Compliance Department.</font></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">ORCHESTRIA</a>
<ul class="dropdown-menu third-menu">
<li class="dropdown-submenu active">ORCHESTRIA
<ul class="dropdown-menu parent third-menu">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Contact Us
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>Hotline:</b></font> 8828 5600</li>
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2 ><b>Support Mailbox:</b></font> <font face = "Barclays Sans">Compliance Application
Support L1</font></li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Application Overview
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 0; color:white;"><font color = C8CBCC size = 2><b>ORCHESTRIA</b></font> </br></br><font size=2> E-mail and instant messaging
monitoring and intelligent review using CA DLP.</font></li>
</ul>
</li>
</ul>
</li>
</ul>
</li>
</div>
</div>
</div>
css:
div.container {
margin-left: 5%;
margin-right: 10%;
}
div.box {
box-sizing: border-box;
width: 50%;
border: 1em white;
float: left;
}
nav {
/*background-image: url("http://teams.barclays.intranet/sites/compliancertb/Shared%20Documents/rtb3.bmp ");*/
background-color: #CCFFFF;
margin-left: 15px;
margin-right: 40px;
}
.back div {
width: 930px;
height: 400px;
background-color: #DBFFFF;
}
table {
border-collapse: collapse;
}
td {
padding: 0 13px 0 13px;
font-family: Barclays Sans;
font-size: 13px;
}
tr.spaceUnder > td
{
padding-bottom: 1em;
}
.third-menu{
position: absolute;
right:0;
top:0;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
position:relative;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 30px;
}
.mn-sidebar {
margin-left: 40px;
display: block;
position: relative;
vertical-align: middle;
padding-bottom: 1px;
background: #333333;
width: 250px;
z-index: 2;
}
#mn-cont {
display: block;
vertical-align: top;
position: relative;
padding: 10;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
border-left: 5px solid #CCFFFF;
border-right: 5px solid #CCFFFF;
}
.mn-vnavigation li a {
border-top: 2px solid #CCFFFF;
border-bottom: 1px solid #CCFFFF;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/*height: 590px; */
width: 310px;
background: #333333;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: list-item;
}
.dropdown-submenu > a:after {
display: list-item;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
js:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
Then codepen link:
http://codepen.io/anon/pen/LpxVdv
Please tell me how to do that?
You can modify .dropdown-submenu:hover > .dropdown-menu css rule:
.dropdown-submenu:hover > .dropdown-menu {
display: list-item;
left: -310px;
}
Obviously you need a space on the left hand side to accommodate this:
.mn-sidebar {
margin-left: 600px;
...
}
EDIT based on below OP comments:
.dropdown-submenu:hover > .dropdown-menu {
display: list-item;
}
.dropdown-submenu:nth-child(2):hover > .dropdown-menu,
.dropdown-submenu:nth-child(2) > .dropdown-menu > .dropdown-submenu:hover > .dropdown-menu {
display: list-item;
left: -310px;
}

Need help fixing a 3 level drop down menu

I'm using the following dropdown:
CSS:
html{
height:100%;
}
body{
height:30%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: block;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
margin-left: 100px;
display: block;
position: relative;
vertical-align:top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display:none;
vertical-align: middle;
position: relative;
padding: 1;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
position: absolute;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 0;
margin-top: 0;
height: 55vh;
width: 900px;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 55vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
HTML:
</br><//br></br></br>
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
</div>
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/anon/pen/RWRdWj
Is it possible to get the sub menu (i.e., when you hover over APL & Products, then I want the 3rd level sub-menus to be displayed in front of APL & Products and not on the top). Is it possible to do that?
Try this example
You can solve this adding a custom class .third-menu on your <ul class="dropdown-menu parent third-menu">
and add this rules to new css class:
.third-menu{
position: relative;
top: -50px!important;
}
the first rule will position the submenu relative to APL & Products and the second rule will make it inline with the left menu hovered item, i.e. APL & Products

How to format a multi-level drop down menu

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I hover over any list item and another sub-list opens, then I don't want the black part to extend till the end of the screen, I want that when I hover over a list item then a new list extending only till the last list item should occur. What do I change in this?
Also, when I try to use margin-left in the .mn-sidebar in CSS, then the dropdown shifts to the right, but a bullet symbol appears before the first list item (outside the dropdown menu), why is that happening? I want the dropdown menu to appear a bit on the right.
Comment the height part under .dropdown-submenu >
.dropdown-menu { css
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
/* height: 101vh;*/Comment this out
width: 216px;
background: #272930;
}
And please explain what do you mean by I want the dropdown menu to appear a bit on the right.
See This
Ok try the below code
.mn-vnavigation li a {
margin-left:15px; Add this style
}
give the margin-left according to your requirement
See This

Drop down menu not working in internet explorer

I wanted to use the following drop down on my webpage:
Html:
<div id="mn-wrapper">
<div class="mn-sidebar">
<div class="mn-toggle"><i class="fa fa-bars"></i></div>
<div class="mn-navblock">
<ul class="mn-vnavigation">
<li class="dropdown-submenu active">
<a tabindex="-1" href="#">Client Advice</a>
<ul class="dropdown-menu">
<li><a tabindex="-1" href="#">Pre-advice</a></li>
<li>Strategy & Technical</li>
<li>Research</li>
<li class="dropdown-submenu active">
APL & Products
<ul class="dropdown-menu parent">
<li style=" border-bottom: 1px solid #ccc;">
<a href="#">Approved Product List
<span aria-hidden="true" class="glyphicon glyphicon-plus pull-right"></span>
<span aria-hidden="true" class="glyphicon glyphicon-minus pull-right" style="display:none;"></span>
</a>
<ul class="child">
<li style="padding:10px 15px; color:white;">Platforms</li>
<li style="padding: 10px 15px; color:white;">Managed Funds</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Wealth Protection</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
<li style="padding: 10px 15px; color:white;">Listed Securities</li>
</ul>
</li>
<li style=" border-bottom: 1px solid #ccc;">Model Portfolios</li>
<li style=" border-bottom: 1px solid #ccc;">Non-approved Products</li>
</ul>
</li>
<li>Implementation</li>
<li>Review</li>
<li>Execution Only</li>
</ul>
</li>
<li>Personal Development</li>
<li>Practice</li>
<li>News</li>
</ul>
</div>
<div class="bottom-mn">
<ul class="mn-vnavigation">
<li>
My Favourite
</li>
<li>
Most Popular
</li>
</ul>
</div>
</div>
<div class="container" id="mn-cont">
<div class="cnt-mcont">
<h1>Title Page</h1>
</div>
</div>
</div>
CSS:
html{
height:100%;
}
body{
height:50%;
position: relative;
}
.dropdown-submenu {
border-bottom: 1px solid #ccc;
}
#mn-wrapper {
display: table;
width: 100%;
position: absolute;
height: 100%;
}
.mn-sidebar {
display: table-cell;
position: relative;
vertical-align: top;
padding-bottom: 49px;
background: #272930;
width: 216px;
z-index: 2;
}
#mn-cont {
display: table-cell;
vertical-align: top;
position: relative;
padding: 0;
}
.container {
margin-right: auto;
}
.cnt-mcont {
background-color: #F6F6F6;
color: inherit;
font-size: 13px;
font-weight: 200;
line-height: 21px;
padding: 15px 30px 30px 30px;
margin-top: 0;
height: 101vh;
}
.mn-sidebar .mn-toggle {
display: none;
padding: 10px 0;
text-align: center;
cursor: pointer;
}
.mn-vnavigation {
margin: 0 0 0 0;
padding: 0;
border-top: 1px solid #1a1c20;
border-bottom: 1px solid #2f323a;
}
.mn-vnavigation li a {
border-top: 1px solid #32353e;
border-bottom: 1px solid #1a1c20;
display: block;
padding: 14px 18px 13px 15px;
color: #fff;
text-decoration: none;
font-size: 12px;
font-weight: 300;
text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.3);
white-space: nowrap;
}
.dropdown-submenu >
.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
height: 101vh;
width: 216px;
background: #272930;
}
.dropdown-submenu:hover >
.dropdown-menu {
display: block;
}
.dropdown-submenu > a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;
}
.dropdown-submenu:hover > a:after {
border-left-color: #fff;
}
.dropdown-submenu.pull-left {
float: none;
}
.dropdown-submenu.pull-left > .dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;
}
ul {
list-style: none;
}
ul.dropdown-menu.parent {
margin-top: -1px;
}
.bottom-mn {
bottom:0px;
position:absolute;
width:100%;
}
JS:
$('.child').hide(); //Hide children by default
$('.parent').children().click(function () {
event.preventDefault();
$(this).children('.child').slideToggle('slow');
$(this).find('span').toggle();
});
http://codepen.io/MaGiO/pen/YXXzeJ
But, when I open this in internet explorer, then the hover dropdowns (the dropdowns that appear on hovering over the arrow signs) don't extend till the end, as a result when I try to move to those sub-menus, they disappear!!
Anyway to fix this? Or make this on-click instead of hover???

Categories