Measha06 wrote I have tried that in place and its brilliant my only concern is that not having linked anything to 'make your choices' people in mobile view might not rollover it on to the next to discover the rest but in the other sizes it is just what I was trying all last night to do on my own and not getting there as not a coder. I haven't linked anything to Celebration Stationery but it works differently. Do you have any suggestions for improvement in this area? I assume that I need to replace the code in each and every page. |
Not Bootstrap but its what you are aiming to achieve in mobile: Also if you are going to use a flyout menu on desktop I would move the link to the left a couple of places otherwise the flyout menu will be cut off in some users browsers
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8"/>
<title>Flex Nav</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<style>
body {
margin: 0;
}
.main-navigation-wrapper {
font-family: helvetica, sans-serif;
font-size: 14px;
line-height: 28px;
background-color: #AE69E0;
}
.main-navigation {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
width: 80%;
margin: 0 auto;
padding: 0;
}
.main-navigation li {
margin: 0;
padding: 0;
list-style: none;
position: relative;
}
.main-navigation li i {
font-size: 18px;
margin: 0;
padding: 0 0 0 5px;
float: right;
}
.main-navigation a {
text-decoration: none;
color: #fff;
display: block;
padding: 15px;
}
.main-navigation a:hover {
color: indigo;
}
/* drop menu */
.drop-menu {
position: absolute;
top: 4.1em;
left: 0;
background-color: #fff;
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #d9d9d9;
box-shadow: 7px 7px 5px #d9d9d9;
}
.drop-menu {
display: none;
}
.drop-menu li {
width: 100%;
}
.drop-menu a {
padding: 10px 15px;
color: #000;
}
.drop-menu a:hover {
background-color: #f2f2f2;
}
/* end drop menu */
/* side menu */
.side-menu {
position: absolute;
top: 0;
left: 100%;
background-color: #fff;
margin: 0;
padding: 0;
width: 200px;
border: 1px solid #d9d9d9;
box-shadow: 7px 7px 5px #d9d9d9;
}
.side-menu {
display: none;
}
/* end side menu */
.mobile-menu-icon {
display: none;
}
@media screen and (max-width: 960px) {
.main-navigation {
display: none;
}
.mobile-menu-icon {
display: block;
text-align: right;
color: #fff;
padding: 15px 40px;
font-size: 20px;
}
.main-navigation li {
width: 100%;
}
/* drop menu */
.main-navigation .drop-menu {
position: static;
width: 100%;
box-shadow: none;
}
/* side menu */
.main-navigation .side-menu {
position: static;
width: 100%;
box-shadow: none;
border: none;
}
}
</style>
<script>
$(document).ready(function(){
//show drop menu
$('.drop-menu-show').css('cursor', 'pointer').click(function() {
$(this).find('.drop-menu').show().end().siblings().find('ul').hide();
});
//show side menu
$('.side-menu-show').css('cursor', 'pointer').click(function() {
$(this).find('ul').show();
});
// show mobile menu icon at 960px window width
$('.mobile-menu-icon').css('cursor','pointer').click(function(){
$('.main-navigation').slideToggle();
});
//realign main-navifation and hide drop menu at 960px window width
$(window).resize(function(){
if ($(window).width() > 960) {
$('.main-navigation').css({'display': '-webkit-box' , 'display': '-ms-flexbox' , 'display': 'flex'});
$('.drop-menu').hide();
}
else if ($(window).width() < 960) {
$('.main-navigation').css('display', 'none');
}
});
});
</script>
</head>
<body>
<nav class="main-navigation-wrapper">
<div class="mobile-menu-icon"><i class="fa fa-bars"></i></div>
<ul class="main-navigation">
<li><a href="#">Home</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Corporate</a></li>
<li><a href="#">Embroidery</a></li>
<li><a href="#">Everything Web</a></li>
<li class="drop-menu-show"><a href="#">Celebration Stationery<i class="fa fa-caret-down" aria-hidden="true"></i>
</a>
<ul class="drop-menu">
<li><a href="#">Celebrations</a></li>
<li><a href="#">Wedding Stationery Items</a></li>
<li><a href="#">FAQ</a></li>
<li class="side-menu-show"><a href="#">Make Your Choices <i class="fa fa-caret-right" aria-hidden="true"></i>
</a>
<ul class="side-menu">
<li><a href="#">Base Choices</a></li>
<li><a href="#">Card Choices</a></li>
<li><a href="#">Accessory Choices</a></li>
<li><a href="#">Wedding Words</a></li>
<li><a href="#">Font Choices</a></li>
</ul>
<!-- end side-menu -->
</li>
</ul>
<!-- end drop=menu -->
</li>
<li><a href="#">Contact Us</a></li>
</ul> <!--end main-navigation-->
</nav>
<!-- end main-navigation-wrapper -->
</body>
</html>
46
Replies
AdChoices