I have made a table with list using ul li. Here is my html code.
<div style="" class="first_calendar clendar-wrapper calendar-1">
<ul class="calendar ">
<li class="calen-title">Sunday <br>Mar 22</li>
<li class="" style="min-height:40px;"><a data-day="7" rel="21" href="#"> 6:00 am</a> </li>
<li class="" style="min-height:40px;"><a data-day="7" rel="22" href="#"> 6:15 am</a> </li>
</ul>
<ul class="calendar ">
<li class="calen-title">Monday <br>Mar 23</li>
<li class="" style="min-height:40px;"><a data-day="1" rel="21" href="#"> 6:00 am</a> </li>
<li class="" style="min-height:40px;"><a data-day="1" rel="22" href="#"> 6:15 am</a> </li>
</ul>
<ul class="calendar ">
<li class="calen-title">Tuesday <br>Mar 24</li>
<li class="" style="min-height:40px;"><a data-day="2" rel="21" href="#"> 6:00 am</a> </li>
<li class="" style="min-height:40px;"><a data-day="2" rel="22" href="#"> 6:15 am</a> </li>
</ul>
</div>
And here is my css code.
.calendar{
margin: 0;
padding: 0;
/*width: 40px;*/
list-style: none;
float:left;
}
.clendar-wrapper{
/*float: left;*/
/*background-image: url("../img/table_bg.png");*/
background-position: 0 -58px;
/*float: left;*/
}
.clendar-wrapper{
display: none;
display: none;
width: 100%;
max-height:350px; overflow-x:hidden ; padding-bottom:10px;
}
.table-responsive {
width: 918px;
/*border:1px solid red;*/
background-color: #FFFFFF;
overflow: visible;
}
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:portrait) {
.clendar-wrapper{
width: 100%;
height:auto;
} /* your css rules for ipad portrait */
}
#media all and (device-width: 768px) and (device-height: 1024px) and (orientation:landscape) {
.clendar-wrapper{
/*width: 100%;*/
height:auto;
} /* your css rules for ipad landscape */
}
.calendar-1{
display: block;
}
.prev-table{
display: none;
}
.login_register a {
color:white;
}
.calen-title {
background-color: #D9E8F4 !important;
}
.calen-title a{
font-size: 16px;
color: #222;
font-weight: bold;
}
.calendar li{
padding: 8px;
border: 1px solid #ddd;
}
.calendar li a {
color: #222;
font-size: 16px;
}
.calendar li:nth-child(2n+2) {
background-color: #f9f9f9;
}
.pagi_list .pre_btn, .pagi_list .nex_btn{
margin: 0px;
}
.last_link, .first_link {
font-size: 35px;
font-weight: bold;
line-height: 0;
position: relative;
top: 5px;
color:#d65c4f;
}
It is coded on bootstrap. When i open it on small resolution device columns drop down. Here i have created a demo link click here to open. Please sugggest me how can i make this calendar responsive.
Thanks in advance.
When using media queries, it isn't usually wise to set the height of the device, just the width. The orientation of the device sets the width, so the media query will still work if you change between portrait and landscape.
You could have the calendar wrapper 100% but a maximum of 700px, which makes each day at 100px fit inside it perfectly, then if the screen is less than 700px you could move them into a vertical arrangement. I have thrown together an example here just using one simple media query > https://jsfiddle.net/pfg1dxfy/ You will see that by grabbing the bar between the javascript window and the results window and resizing it, the tables will change based on the width.
I have also added a simple clear fix, you need this when floating elements. In the CSS it is .clear {clear:both;} and you then include it after all of the floated elements with
.calendar{
margin: 0;
padding: 0;
list-style: none;
float:left;
width: 100px;
}
.clendar-wrapper{
width: 100%;
max-width: 700px;
margin: auto;
}
#media (max-width: 699px) {
.calendar{
width: 100%;
float: none;
margin: 30px 0;
}
}
Related
One item will not respond out of three in my secondary navigation menu, held within the footer. The top and bottom links both work when I hover over them, but the middle does not seem to detect me mousing over the option for some reason.
HTML OF FOOTER & MENU ELEMENT:
<footer>
<ul class="social">
<li class="social"> <a href="https://www.facebook.com/Aki-Weininger-104277784411418/" id="profile-link"
target="https://www.facebook.com/Aki-Weininger-104277784411418/"> <i class="fab fa-facebook-f"> </i> </a>
</li>
<li class="social"> <a href="https://www.instagram.com/akiweininger/?hl=en" id="instagram-link"
target="https://www.instagram.com/akiweininger/?hl=en"> <i class="fab fa-instagram"> </i> </a> </li>
<li class="social"> <a href="https://www.behance.net/akiweininger" id="Behance-link" target="https://www.behance.net/akiweininger">
<i class="fab fa-behance"></i> </a> </li>
<li class="social"> <a href="https://www.upwork.com/freelancers/~01d4ae188cd67db90c" id="Upwork-link"
target="https://www.upwork.com/freelancers/~01d4ae188cd67db90c">
<img class="upwork" src="https://i.imgur.com/Z02P8YO.png" alt="upwork">
</a> </li>
</ul>
<div class="navi-title">
Navigation
</div>
<ul class="navi"> <li class="navi">
<a href="PLACEHOLDER">
Home
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Works
</a>
</li>
<li class="navi">
<a href="PLACEHOLDER">
Contact
</a>
</li>
</ul>
</footer>
CSS FOR FOOTER & MENU ELEMENT:
footer {
clear: both;
background-color: #2a7de1;
text-align: center;
padding: 2% 0% 1% 0%;
margin-top: 20%;
position: relative;
}
footer ul.social li.social {
list-style: none;
display: inline;
}
footer > ul.social li.social a {
text-align: center;
font-size: 2vw;
margin: 0% 3% 0% 3%;
overflow: hidden;
text-decoration: none;
}
footer > ul.social li.social a .fab {
color: white;
}
footer > ul.social li.social a:hover .fab {
transform: scale(1.3);
transition: 0.3s;
}
.upwork {
width: 2.2%;
}
.upwork:hover {
transform: scale(1.3);
transition: 0.3s;
}
footer > ul.navi li.navi {
list-style: none;
margin: 0% 0% 0% 75%;
text-align: left;
padding: 0.3%;
}
.navi-title {
color: white;
font-family: 'karla';
font-size: 1.4vw;
text-align:left;
margin: 0% 0% 0.5% 75%;
font-weight: 700;
}
footer > ul.navi li.navi a {
text-decoration: none;
color: white;
font-family: 'karla';
font-size: 1.2vw;
}
ul.social {
position: absolute;
margin-top: 3.8%;
}
footer > ul.navi li.navi a:hover {
text-decoration: underline;
}
Codepen
The element selector below is laying over top of the link. If you add a width:600px; to the element selector below, the hover for the link works. Of course it doesn't look great that way, but it's somewhere to start.
ul.social {
width: 600px;
position: absolute;
margin-top: 3.8%;
}
The issue is with your ul.social in the footer. I looked at it in the inspector.
You can see that it's overlapping the unreachable link, "Works".
As a test, I applied display: none to the ul and the "Works" link was once again clickable. My advice would be to restructure the footer using flexbox, taking care not to use any absolute positioning and overlapping.
First day of me learning to code in html and css.
I'm trying to add navigation bar on a image but i am unable to do so.
The background image i am trying to add is not displaying too.
Can anyone help me out here.
.header {
background-image: url("vent1.jpg");
}
.nav {
overflow: hidden;
float: left;
background-color: #333;
margin: 0px;
padding: 0px;
list-style-type: none;
}
.menu-bar {
list-style-type: none;
text-align: center;
}
.ul {
display: inline-block;
padding: 8px;
margin: 0px;
color: white;
}
<div class="header">
<div class="nav">
<div class="menu-bar">
<ul>
<li> Home</li>
<li>
About Us</li>
<li>
Portfolio</li>
<li>
Contact</li>
</ul>
</div>
</div>
</div>
header class should have these properties.
.header {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url("vent1.jpg");
background-repeat: no-repeat;
background-size:cover;
}
I'm coding a website, i have a navigation bar on top of it, and a sidebar on the left. I want to turn this Fiddle into this one. It can use CSS, JQuery, JavaScript and Bootstrap, when you click the icon, the sidebar drags out to the right. And when you click it again, it collapse to the left.
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria- hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
please have a look at the following solution based on your code using CSS3 translate:
HTML:
<div class="sidebar">
<p>
This sidebar goes all screen down, and if you scroll the webpage, the sidebar stays at the same place everytime, the scro
</p>
</div>
<div class="content">
<ul id="navbar">
<li class="title" id="sidebar_switch"><i class="fa fa-bars" aria-hidden="true"></i></li>
<li class="title"><img alt="Logo" src="http://www.iconsdb.com/icons/preview/orange/stackoverflow-6-xxl.png" height="16px" width="16px"></li>
<li class="title">Title</li>
</ul>
<div class="main">
aaaaaaaaaa
</div>
</div>
CSS:
body {
height: 100%;
width: 100%;
margin: 0px;
font-family: sans-serif;
overflow: hidden;
}
a {
text-decoration: none;
}
.title {
float: left;
display: block;
padding: 14px 16px;
}
#navbar {
font-weight: bold;
text-align: center;
float: left;
background-color: #333;
color: white;
list-style-type: none;
overflow: hidden;
margin: 0;
padding: 0;
width: 100%;
}
.sidebar{
position:fixed;
top:0px;
left:0px;
width:100%;
color:red;
}
.slide{
-webkit-transform: translate3d(25%,0,0);
}
.content{
width:100%;
height: 30em;
position:absolute;
left:0px;
top:0px;
background: white;
-webkit-transition:all .2s linear;
}
.content .slide{
-webkit-transform: translate3d(25%,0,0);
}
i{
cursor: pointer;
}
JS:
$('i').click(function(){
$('.content').toggleClass('slide');
});
JS Fiddle Demo
So I have a panel layout that I've been throwing together and it has a fancy vertical navbar. I have it aligned correctly and everything and I have successfully been able to get a dropdown menu to appear in a vertical fashion, however, for some reason it is always appending to the last item on list. I can't understand why it is doing this.
I've posted all of my code below, and from previous research on the initial issue of just getting the menu to show up, I believe that my css is correct, so I'm wondering if it may be a javascript issue on the boostrap side, but I have no javascript currently being used with the side menu.
CSS
/************
* side navbar
*************/
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -92px 0 0 100%;
border-radius: 0;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
html
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li>
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/equipment">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
I have a working fiddle to demonstrate what my issue is:
https://jsfiddle.net/ye1q4wfu/4/
All I want it to do is, when I click on the list item that has a dropdown. I want the dropdown to appear next to it.
Just set the top of dropdown to top: auto;
#side-nav .dropdown-menu {
top: auto;
}
https://jsbin.com/fukujazuko/
My internet has some trouble with jsfiddle
If you don't mind using a bit of JQuery, I think this will do the trick:
$('.dropdown-menu').each(function() {
$(this).css('top', $(this).closest('li').css('top'));
});
You will also need to change one line of your CSS:
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
//margin: -92px 0 0 100%; /* Removed */
margin: 0 0 0 100%; /* Added */
border-radius: 0;
}
Demo Here
Use the following CSS code that the sub-menu appears in front of the item.
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: -290px 0 0 100%;
border-radius: 0;
}
I've added the clearfix class to the li element in which your dropdown menu is. Then, these attributes to dropdown-menu
#side-nav .dropdown-menu {
...
top: auto;
float: right;
}
And added this css rule:
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
This is the complete snippet with the changes. When showing the code snippet, please, click on "Full page" to see the result.
#side-nav{
height: 100%;
padding-left: 0;
padding-right: 0;
}
.nav-stacked{
height: 100%;
width: 100%;
background: #3B3B3B;
overflow-x: visible;
overflow-y: hidden;
margin-bottom: -99999px;
padding-bottom: 99999px;
}
.nav-stacked > li > a > p{
font-size: 14px;
padding-left: 4px;
display: block;
text-align: center;
}
.nav-stacked > li > a > span{
font-size: 36px;
display: block;
text-align: center;
}
.nav-pills > li > a{
border-radius: 0;
padding-top: 15px;
}
.nav-pills > li.active > a{
background: linear-gradient(#343434, #000000);
}
.nav-pills > li:not(.active) > a{
background: linear-gradient(#4B4B4B, #3B3B3B);
color : #e5e5e5;
}
.nav-pills > li:last-child:not(.active) > a{
border-bottom: solid 1px #353535;
}
.nav-pills > li:not(.active) > a:hover{
background: linear-gradient(#ffffff, #CACCCB);
color : #333;
}
.nav-stacked > li+li{
margin-top: 0;
}
#side-nav li.active.open, #side-nav li:not(.active).open{
position: static;
}
#side-nav .dropdown-menu{
overflow-x: visible;
width: 100% !important;
margin: 0 0 0 100%;
border-radius: 0;
top: auto;
float: right;
}
#side-nav .dropdown-toggle {
float: left;
width: 100%;
}
.dropdown-toggle .glyphicon-chevron-right{
font-size: 14px;
position: absolute;
top: 36px;
left: 85%;
}
<!DOCTYPE html>
<html>
<head>
<script src="https://code.jquery.com/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<nav id='side-nav' class='hidden-xs col-sm-2 col-md-1'>
<ul class='nav nav-pills nav-stacked'>
<li class="clearfix"> <!-- ADDED THE CLEARFIX CLASS -->
<a class="dropdown-toggle" data-toggle="dropdown" href="#" role="button" aria-haspopup="true" aria-expanded="false">
<span class='glyphicon glyphicon-user'></span>
<p>Driver</p>
<span class='glyphicon glyphicon-chevron-right'></span>
</a>
<ul class='dropdown-menu'>
<li>EXPIRATIONS</li>
<li><a class='clinic' href="#">CLINICS</a></li>
<li><a class='drugTest' href="#">DRUG TESTING</a></li>
<li>RECRUITING</li>
</ul>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-list-alt'></span>
<p>Comcheck</p>
</a>
</li>
<li>
<a href="/comcheck">
<span class='glyphicon glyphicon-wrench'></span>
<p>Equipment</p>
</a>
</li>
</ul>
</nav>
</body>
</html>
I've searched for a while for a way to do what I'm trying to accomplish but came up with nothing that could help me or explain it well enough for me to understand. I have this jsfiddle that I'm working on. I'm having some issues getting this to work the way I'm wanting it to. I would like to clone the parent link into the dropdown area and make sure the parent link is disabled (only on mobile) and only displays the dropdown when clicked. I know this can probably be accomplished by using JS since I cannot edit the HTML that is being outputted by the CMS I am working in. I'm sorry, I'm not very keen in JS, still learning. Please tell me if you need any more information. Thank you so much!
HTML
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem calendarnav"><a class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
CSS
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
JS
//This JS was on the page already, maybe you can utilize it in someway.
$(document).ready(function(){
var allPanels = $('.sflistItemContent').hide();
$('.sflistListItem:first > .sflistItemContent').show();
$('.sflistItemTitle').click(function() {
allPanels.slideUp();
$('.expanded').removeClass('expanded');
$(this).next().slideDown();
$(this).addClass('expanded');
return false;
});
$('.menuItem:nth-child(3n)').addClass('calendarnav');
$('.menuItem:nth-child(4n)').addClass('membership');
$('.menuItem:nth-child(5n)').addClass('aboutus');
$('.menuItem:nth-child(6n)').removeClass('calendarnav').addClass('membersonly');
// Form input hide/display default text on focus/blur
$(".sfsearchTxt").focus(function() {
if(this.value == this.defaultValue) {
this.value = "";
}
}).blur(function() {
if(!this.value.length) {
this.value = this.defaultValue;
}
});
});
Ok, I worked on this for about an hour and a half, and it was quite some work. Basically, what I did was copy the parent links and added it to their respective dropdown lists as the first item and gave them a class of "clone". That way, using css and media queries, those options only appear on a mobile layout and disappear when you resize the window back to full desktop view. And you said it yourself, yes it requires some javascript to create the click events that will make the dropdowns appear when their respective parent link is clicked. To do that I used "event.preventDefault();" which stops the link from going to the page where it's supposed to take you and then immediately use show() to make the dropdown appear (it will also put away the dropdown list if you click it again using hide(); ). Lastly, using your css, I deactivated the hover effects on the dropdown menus, but only on mobile layouts. The desktop layout has remained intact. Here's the code:
$(document).ready(function(){
if ($(".menuItem").css("float") == "left") {
$(".content").css("display", "");
}
var showDropDown = function(id) {
if ($(".menuItem").css("float") == "none") {
event.preventDefault();
var id = "#" + id;
var dropdownSelector = $(id).parent().children(".content");
if (dropdownSelector.css("display") == "none") {
dropdownSelector.show();
}
else {
dropdownSelector.hide();
dropdownSelector.css("display", "");
}
}
};
$("#resources").click(function() {showDropDown($("#resources").attr("id"))});
$("#education").click(function() {showDropDown($("#education").attr("id"))});
$("#calendar").click(function() {showDropDown($("#calendar").attr("id"))});
$("#membership").click(function() {showDropDown($("#membership").attr("id"))});
$("#about-us").click(function() {showDropDown($("#about-us").attr("id"))});
$("#members-only").click(function() {showDropDown($("#members-only").attr("id"))});
});
body{
background:#112B50;
}
ul{
list-style:none;
}
.main-nav {
clear: both;
margin-top: 20px;
float: left;
width: 100%;
}
#megaMenu {
float: right;
padding-top: 15px;
position:absolute;
}
.menuItem {
float: left;
position: relative;
}
.menuLink {
display: block;
color: #fff;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right 5px;
text-decoration: none;
padding-right: 15px;
margin-right: 22px;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membersonly .menuLink {
margin: 0;
color: #FC0;
}
.menuItem .content {
display: none;
position: absolute;
top: 15px;
padding-top: 20px;
left: 0;
float: left;
max-width: 344px;
z-index: 10;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 200px;
}
.menuItem:nth-of-type(5) .content {
left: -118px;
}
.menuItem:nth-of-type(6) .content {
left: -82px;
}
.menuItem:hover .content,
.menuItem:active .content,
.menuItem:focus .content {
display: block;
}
.calendarnav:hover .content {
display: none;
}
.subnav {
border: 3px solid #476f93;
background-color: #fff;
float: left;
width: 344px;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
width: 200px;
}
.subnav img {
position: absolute;
top: 11px;
left: 30px;
}
.menuItem:nth-child(5) .subnav img {
left: 146px;
}
.menuItem:nth-child(6) .subnav img {
left: 132px;
}
.membership .left, .aboutus .left, .membersonly .left {
width: 180px;
}
.clone {
display:none;
}
/*******************************************
Media Queries
*******************************************/
#media(max-width:974px){
.header-right {
max-width: 100%;
width:100%;
padding: 15px;
box-sizing: border-box;
}
}
#media(max-width:700px){
.sf_cols.utilityLinks, .utilityLinks{
text-align:center;
}
}
#media(max-width:730px){
.main-nav {
margin-top: 0;
}
#megaMenu {
float: right;
padding-top: 15px;
width: 100%;
position: relative;
box-sizing: border-box;
}
.menuItem {
float: none;
position: relative;
width: 100%;
background-color: transparent; /* changes the background-color of main nav */
padding: 15px;
box-sizing: border-box;
}
.menuLink {
display: block;
font-size: 15px;
background: url('http://s22.postimg.org/5ll1ux2r1/nav_arrow.png') no-repeat right center;
text-decoration: none;
padding-right: 0px;
margin-right: 0px;
color: white;
width: 100%;
height: auto;
}
.menuItem .content {
display: none;
position: relative;
top: 0;
padding-top: 20px;
left: 0;
float: none;
max-width: 100%;
z-index: 10;
margin: 0 auto;
text-align: center;
}
.subnav {
border: 0px;
background-color: #fff;
float: none;
width: 100%;
box-shadow: 0 0 8px #333;
-moz-box-shadow: 0 0 8px #333;
-webkit-box-shadow: 0 0 8px #333;
}
.content .left, .content .right {
float: none;
max-width: 100%;
width:100%;
padding: 0;
box-sizing: border-box;
}
.calendarnav .menuLink {
background: none;
padding: 0;
}
.membership .subnav, .aboutus .subnav, .membersonly .subnav {
max-width: 100%;
width:100%;
text-align: center;
margin: 0 auto;
}
.membership .content, .aboutus .content, .membersonly .content {
width: 100%;
}
.menuItem:nth-of-type(5) .content {
left: 0;
}
.menuItem:nth-of-type(6) .content {
left: 0;
}
.membersonly .menuLink {
margin: 0 auto;
}
.content li {
border: 1px solid #f1f1f1;
}
#header {
max-height: 100%; /*300px*/
margin-bottom: 45px;
overflow: auto; /*hidden*/
float: none;
}
.header-right, #content {
float: left;
max-width: 715px;
width: 100%;
}
.menuItem:nth-child(5) .subnav img {
left: 50%;
}
.menuItem:nth-child(6) .subnav img {
left: 50%;
}
.subnav img {
left: 50%;
}
.menuItem:hover .content {
display: none;
}
.calendarnav:hover .content {
display: none;
}
.clone {
display:block;
}
}
#media (max-width:600px){
.canidates{
width:100%;
margin-bottom: 15px;
}
.sf_colsOut.sf_2cols_1_50,
.sf_colsOut.sf_2cols_2_50{
width:100%;
}
.sf_2cols_2_50 .sf_2cols_2in_50{
margin-left:0 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="main-nav">
<ul id="megaMenu" class="menuContainer nav">
<li class="menuItem"><a id="resources" class="menuLink" href="resources"><span class="menuText">Resources</span></a>
<div class="content">
<div class="subnav" id="drop-resources">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Resources
<li>Resource Library
</li>
<li>Legal Resources
</li>
<li>Ask the Experts
</li>
<li>Community
</li>
<li>Find Storage
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Buyer's Guide
</li>
<li>Upcoming Auctions
</li>
<li>Forms Software
</li>
<li>Self Storage News Magazine
</li>
<a href="/resources/community/open-for-business-blog">
<li>Blog</li>
</a>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem activeItem"><a id="education" class="menuLink" href="education"><span class="menuText">Education</span></a>
<div class="content">
<div class="subnav" id="drop-education">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Education
<li>Annual Conference
</li>
<li>Executive Retreat
</li>
<li>Luncheons
</li>
</ul>
</div>
<div class="right">
<ul>
<li>Webinars
</li>
<li>Podcasts
</li>
<li><a target="_blank" href="/photos/txssa/sets/">Luncheon Photos</a>
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem"><a id="calendar" class="menuLink" href="calendar"><span class="menuText">Calendar</span></a>
<div class="content">
<div class="subnav" id="drop-calendar">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul id="calendarOptions">
<li class="clone">Calendar
<li>All Calendar Items
</li>
<li>Luncheon Calendar
</li>
<li>Deadline Calendar
</li>
<li>Education Calendar
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membership"><a id="membership" class="menuLink" href="membership"><span class="menuText">Membership</span></a>
<div class="content">
<div class="subnav" id="drop-membership">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Membership
<li>Membership Benefits
</li>
<li>Join REDACTED
</li>
<li>Pay My Dues
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem aboutus"><a id="about-us" class="menuLink" href="about-us"><span class="menuText">About Us</span></a>
<div class="content">
<div class="subnav" id="drop-about">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">About Us
<li>Contact Us
</li>
<li>Board
</li>
<li>Board Nominations
</li>
<li>Committees
</li>
<li>FAQs
</li>
<li>Charitable Fundraising
</li>
</ul>
</div>
</div>
</div>
</li>
<li class="menuItem membersonly"><a id="members-only" class="menuLink" href="members-only"><span class="menuText">Members Only</span></a>
<div class="content">
<div id="drop-members" class="subnav">
<img alt="" src="http://s28.postimg.org/5riytyyvt/subnav_arrow.png">
<div class="left">
<ul>
<li class="clone">Members Only
<li>My Account
</li>
</ul>
</div>
</div>
</div>
</li>
</ul>
</div>
Also here's the jsfiddle where I did my work: http://jsfiddle.net/381nxmuo/