I'm helping out a friend setup a responsive menu for his website, and from some initial research we failed to find ways we could achieve this with CSS3, and it seems like it's only achievable through javascript / jquery. Having never worked with such languages I was hoping you could help us achieve this:
We'd like to make the sub-menus expand by clicking their parent li whenever the screen resolution is 1200px or less.
Below is the HTML and CSS for the menu in question which currently expands on mouse hover.
HTML
<nav id="main_navbar_container" class="navbar navbar-default ">
<div class="container">
<div class="row">
<!-- Brand and expand button get grouped for better mobile display -->
<div id="main_logo_container" class="navbar-header">
<!--Main logo container-->
<div="container">
<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false"> <span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button> <a id="brand_name_header" class="navbar-brand" href='http://localhost/wordpress/' title='test' rel='home'>
<div>
<img src='http://localhost/wordpress/wp-content/uploads/2015/10/2015.10.13-jbits.png'width="100px">
</div><!-- site-logo -->
</a>
</div>
<!--main logo container-->
<!-- Collect the nav links, forms, and other content for toggling -->
<div id="menu_container">
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<nav id="primary_menu" class="nav navbar-nav">
<div class="menu-home-screen-menu-container">
<ul id="menu-home-screen-menu" class="menu">
<li id="menu-item-447" class="menu-item-447">Home
</li>
<li id="menu-item-428" class="menu-item-428">About us
</li>
<li id="menu-item-429" class="menu-item-429">Recommendations
</li>
<li id="menu-item-427" class="menu-item-427">Gallery
</li>
<li id="menu-item-13" class="menu-item-13"><a>Services</a>
<ul class="sub-menu">
<li id="menu-item-421" class="menu-item-421">Evacuation Plans
</li>
<li id="menu-item-425" class="menu-item-425">Risk Assessment
</li>
<li id="menu-item-417" class="menu-item-417">Fire safety advice
</li>
<li id="menu-item-424" class="menu-item-424">Risk Management
</li>
<li id="menu-item-423" class="menu-item-423">Fire Training
</li>
<li id="menu-item-422" class="menu-item-422">Fire Drills
</li>
</ul>
</li>
<li id="menu-item-16" class="menu-item-16"><a>Products</a>
<ul class="sub-menu">
<li id="menu-item-430" class="menu-item-430">Fire blankets
</li>
<li id="menu-item-431" class="menu-item-431">Fire extinguishers
</li>
<li id="menu-item-432" class="menu-item-432">Fire alarms
</li>
</ul>
</li>
<li id="menu-item-426" class="menu-item-426">FAQs
</li>
<li id="menu-item-420" class="menu-item-420">Contact Us
</li>
</ul>
</div>
</ul>
</div>
</div>
</div>
</div>
</nav>
CSS
#main_navbar_container{
margin-bottom:0;
background:white;
}
.navbar-collapse {
text-align:center;
}
#menu_container{
width:80%;
float:right;
display:block;
}
#primary_menu{
display:block;
float:left;
width:100%;
}
#primary_menu ul{
list-style: none;
margin: 0;
padding-left: 0;
}
#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
color:#ea474b;
font-weight: 600;
display: block;
text-decoration: none;
padding: 15px 20px;
margin:auto;
}
#primary_menu a:hover{
color:#F9690E;
background: #f1f1f1;
}
#primary_menu li{
float:left;
position:relative;
margin:0
}
#primary_menu ul ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width:100%;
color: #8c9398;
position: absolute;
top: 3.5em;
max-height:0;
overflow-y: hidden;
}
#primary_menu ul li:hover ul {
box-shadow: 0 3px 3px rgba(0, 0, 0, 0.4);
border-radius: 0 0 4px 4px;
border-width:0 !important;
border: 1px solid #dadada;
background: #fff;
width: 200px;
position:absolute;
padding:0;
margin:0;
max-height:400px;
left:-50px;
z-index:999;
transition: max-height 1s;
-webkit-transition: max-height 1s;
-moz-transition: max-height 1s;
-o-transition: max-height 1s;
}
.sub-menu li{
width:100%;
}
#primary_menu ul li ul a{
color:#ea474b;
}
#primary_menu ul li ul li:hover a{
color:#F9690E;
background: #f1f1f1;
}
#media (max-width: 1200px){
#main_navbar_container .container, #menu_container { width: 100%;}
#menu_container .navbar-collapse { padding: 0;}
#primary_menu{
width:100%;
margin:0;
}
#primary_menu li{
width:100%;
margin:5px 0 0 0;
}
#primary_menu ul li ul {
border-radius: 0 !important;
border-color: transparent !important;
background-color:rgb(238,238,238);
display:block;
max-height:0;
-webkit-transition: all 0s;
transition: all 0s;
}
#primary_menu ul li:hover{
background:none;
}
#primary_menu ul li:hover a{
font-color:black;
/*\color:rgb(207,0,15);*/
}
#primary_menu ul li:hover ul{
display:block;
position:initial;
background-color:rgb(238,238,238);
width:100%;
padding:0;
margin:0;
max-height:400px;
transition:max-height 1s;
}
#primary_menu ul li:hover li:first-of-type{
border-top:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover li:last-of-type{
border-bottom:1px solid rgb(238,238,238);
}
#primary_menu ul li:hover a:link,
#primary_menu ul li:hover a:visited{
color:#ea474b;
}
#menu-home-screen-menu{
margin-left:0;
}
}
Fiddle to explain: http://jsfiddle.net/ee7zdtb4/
Help is greatly appreciated.
Regards,
J
We'd like to make the sub-menus expand by clicking their parent li
whenever the screen resolution is 1200px or less
You would need to use media-queries to detect the screen size and then change your CSS accordingly.
it seems like it's only achievable through javascript / jquery
No. Not at all. You can very well do this with just a clever mix of elements with corresponding pseudo-classes and adjacent sibling selector. Hint: use hidden checkboxes with labels to control the sibling elements.
Here is a small demo. It's based on an old answer of mine, changed to add media-queries to allow for fully expanded accordion style menu when the screen is larger than 768px (you can tweak it to your use-case of 1200). It gets collapsed and then is controlled by click-able first-level menu items. No Javascript, just CSS.
In the fiddle, drag and resize the output pane to see it in action. In the snippet, click full-screen and back to see it in action. Use this demo to then take it forward for your exact use-case.
Demo Fiddle: http://jsfiddle.net/abhitalks/Lqpc2Len/
Demo Snippet:
* { box-sizing: border-box; padding: 0; margin: 0; }
body { font-family: sans-serif; font-size: 1em; }
div.accordion {
display: inline-block; vertical-align: top;
width: 240px; margin: 16px; border: 1px solid #ddd;
}
div.accordion label:last-of-type { border: none; }
input { display: none; }
input + label {
display: block; background-color: #eee;
padding: 8px; cursor: pointer; border-bottom: 1px solid #ddd;
font-family: 'segoe ui', sans-serif; font-weight: 300; transition: all 0.25s;
}
input + label:hover { background-color: #ddd; }
input + label::before {
content: '→';
display: inline-block; margin-right: 6px;
font-family: calibri, sans-serif; font-weight: 400; transition: all 0.5s;
}
div.content {
overflow: hidden; height: 0px; padding: 0px;
font-family: calibri, sans-serif; font-weight: 300;
background-color: rgba(250,250,250,0.6); transition: all 0.5s;
}
input:checked + label + div.content { height: 64px; padding: 6px; }
input:checked + label { background-color: #ddd; }
input:checked + label::before { font-weight: 600; transform: rotate(90deg); }
#media screen and (min-width: 768px) {
div.content { height: 64px; padding: 6px; }
input + label::before { font-weight: 600; transform: rotate(90deg); }
}
<div class="accordion">
<input id="i12" name="handle2" type="checkbox" />
<label for="i12">One</label>
<div class="content">Lorem ipsum</div>
<input id="i22" name="handle2" type="checkbox" />
<label for="i22">Two</label>
<div class="content">Lorem ipsum</div>
<input id="i32" name="handle2" type="checkbox" />
<label for="i32">Three</label>
<div class="content">Lorem ipsum</div>
<input id="i42" name="handle2" type="checkbox" />
<label for="i42">Four</label>
<div class="content">Lorem ipsum</div>
</div>
You can achieve all your needs in responsiveness with css media queries. If you specify max-width condition and describe all your necessary css-classes behaviour for specified width, you would have another stylings for current element at different resolution. For example,
.foo-class {
background-color: green
}
.foo-class:hover {
background-color:red;
color: white;
}
#media only screen and (max-width: 768px) {
.foo-class {
background-color: blue;
}
.foo-class:hover {
background-color: white;
color: green;
}
}
So in this case when you have monitor/screen with actual width >768px element with class .foo-class will have green background and on hover it will be with red background and white text color. If your screen of width 768px or less, then this element will be of blue background and with white background and green text color on hover action. It does not need any additional javascript logic, its pretty simple.
Also you can use popular ui framework Bootstrap. It's very simple, has a lot of modern ui features and has built in responsive support
Related
I'm creating a responsive nav bar with js, css and html. I have a problem right now, when the screen becomes x size (the size I defined as max-width) there is the pop up of the responsive nav bar. Although, only the last anchor (Loja) appears on that. I want it to be displayed flex and the flex-direction to column. As this prints shows:
https://imgur.com/aXjZD8z
https://imgur.com/8s0J6tc
https://jsfiddle.net/tL2vp9k5/1/
<header>
<nav class="menu">
<div>
<ul class="ulLogo">
<li title="Logo Carla Ornelas">
<img id="espiral" src="../Logo.png">
</li>
</ul>
</div>
<div>
<ul class="ulSecções">
<li> Home </li>
<li class="carla"> <a class="carlaOrnelas" href="#" title="Carla Ornelas">Carla Ornelas</a>
<li>Cursos </li>
<li>Conteúdos Especiais </li>
<li>Recursos</li>
<li> Contatos </li>
<li> Loja <i class="fa fa-shopping-cart" aria-hidden="true"></i> </li>
</ul>
</div>
<div class="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
</div>
</nav>
</header>
/*Universal Commands*/
*{
padding:0;
margin:0;
text-decoration: none;
}
/*Nav bar*/
/*Background Menu*/
nav.menu {
width:100%;
height: 85px;
background-color: rgb(24, 24, 24);
box-shadow: 0px 1px 16px 3px;
}
/*Costumização do body */
body {
background-color: rgb(255, 255, 255);
}
body .menu{
position:fixed;
z-index: 100;
}
/*Costumização logo */
.ulLogo li {
list-style: none;
}
.ulLogo li a img{
width: 180px;
float:left;
padding: 19px 0px 0px 60px;
}
/*Transição Logo Opacity*/
.ulLogo li a img#espiral:hover {
opacity: 0.7;
transition: opacity 300ms linear 0s;
}
.ulLogo li a img#espiral:not(:hover) {
opacity: 1;
transition: opacity 399ms linear 0s;
}
/*Costumização sections */
nav .ulSecções {
float: left;
padding-left: 90px;
}
nav ul.ulSecções li{
float: left;
list-style: none;
position: relative;
line-height: 90px;
}
nav ul.ulSecções li a{
display:block;
font-family: "Ubuntu", "Palatino", sans-serif ;
color:rgb(192, 163, 68);
text-transform: uppercase;
font-size: 14px;
letter-spacing: 0.1em;
opacity: 0.9;
padding: 0px 18px;
}
nav ul.ulSecções li a i{
font-size: 16px;
}
nav ul.ulSecções li a.loja{
font-weight: 700;
font-size: 14px;
letter-spacing: 0.1em;
}
/* Transition das anchors */
nav ul.ulSecções li a:hover {
color: rgb(255, 255, 255);
opacity: 1;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
nav ul.ulSecções li a:not(:hover) {
color: rgb(204, 174, 75);
opacity: 0.9;
transition: color 150ms ease-in 0s,
opacity 150ms ease-in 0s;
}
/*Mobile screen adjustments*/
#media screen and (max-width: 1250px){
nav ul.ulSecções li {
position: absolute;
right: 0px;
height: 92vh;
top: 14vh;
background-color: rgb(24, 24, 24);
display: flex;
flex-direction: column;
align-items: center;
width: 100%;
}
} ```
All your <li> elements have the exact same position, so they're layered on top of eachother. If I remove the background you can clearly see this (see image at the bottom).
you need to select your <ul> element, not the <li> elements
/* #media screen and (max-width: 1250px){
nav ul.ulSecções li { */
#media screen and (max-width: 1250px) {
nav ul.ulSecções {
I am working on a portal, currently designing the UI. I am using frameset here. I need to minimise the left frame (ie Sidebar/Menu) when I click on any link in the sidebar and the web page loads up in the right(Right) frame. The minimised version of the sidebar only display the icons of the tabs and I want an arrow key which will again maximize the sidebar if clicked. a
Here is the code for my frame.html
<!DOCTYPE html>
<html>
<frameset cols="15%,*" scrolling="yes">
<frame name = "left" src="menu.html" scrolling="yes">
<frame name = "center">
</frameset>
</html>
my code for sidebar/menu is menu.html
<!DOCTYPE html>
<html>
<head>
<!--Link to the CSS style sheet-->
<link rel="stylesheet" href="css/menu.css">
<script src="https://kit.fontawesome.com/5c399403c6.js"></script>
</head>
<body>
<!--Sidebar/Menu-->
<div class="wrapper">
<div class="menu">
<!--Logo comes here-->
<h2>Alfred</h2>
<!--Search Bar-->
<div class="search">
<!--Links in the sidebar/menu-->
<ul>
<li><input class="search-text" type="text" placeholder="Search here" name="">
<a class="search-button" href="#">
<i class="fas fa-search"></i>
</li>
<li><i class="fas fa-chart-line"></i><a href="dashboard.html" target ="center" >Dashboard</a></li>
<li><i class="fas fa-building"></i><a href="hq.html"target ="center" >HQ</a></li>
<li><i class="fas fa-file-invoice-dollar"></i>Accounts</li>
<li><i class="fas fa-users"></i>People</li>
<li><i class="fas fa-at"></i>Mail</li>
<li><i class="fas fa-handshake"></i>CRM</li>
<li><i class="fas fa-calendar-alt"></i><a href="calendar.html"target ="center">Calendar</li>
<li><i class="fas fa-clipboard-list"></i>Board</li>
<li><i class="fas fa-archive"></i>Files</li>
<li><i class="fas fa-headset"></i>Support Desk</li>
<li><i class="fas fa-cogs"></i><a href="settings.html"target ="center">Settings</li>
</ul>
</div>
</div>
</body>
</html>
and my stylesheet is menu.css
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
#import url('https://fonts.googleapis.com/css?family=Raleway&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
list-style: none;
text-decoration: none;
font-family: 'Muli', sans-serif;
}
i{
margin: 10px;
}
body{
background: #391E57;
}
.wrapper{
display: flex;
position: relative;
color: #ECE4F4;
}
.wrapper .menu {
position: fixed;
width: 200px;
height: 100%;
background: #391E57;
padding: 30px 0;
}
.wrapper .menu h2{
color: #fff;
text-align: center;
margin-bottom: 30px;
font-family: 'Raleway', sans-serif;
letter-spacing: 4.5px;
transition: all .2s ease-in-out;
}
.wrapper .menu h2:hover{
color: #53D2F5;
transform: scale(1.1);
}
.search-text{
width: 140px;
height: 25px;
}
.wrapper .menu ul li{
padding: 5px;
border-bottom: 1px solid rgba(0, 0, 0, 0.05);
border-top: 1px solid rgba(225, 225, 225, 0.05);
}
.wrapper .menu ul li a{
color: #9F9CA2;
display: inline;
}
.wrapper .menu ul li .fas{
width: 25px;
color: #9F9CA2;
transition: all .2s ease-in-out;
}
.wrapper .menu ul li:hover .fas{
color: #53D2F5;
transform: scale(1.1);
}
.wrapper .menu ul li:hover{
background: #79668F;
}
.wrapper .menu ul li:hover a{
color: #fff;
}
There are a couple ways you could partially hide a sidemenu component, and it depends on how you structure the rest of your page. You could use margin, width, absolute positioning... One thing you will have to do for sure is toggle create a class for when the sidemenu is supposed to be full width, and when it is supposed to be partially open.
So lets say you choose to use width:
Create a .hide class for your .wrapper .menu with the width you want when it is partially closed, like that:
.wrapper .menu.hide {
width: 50px;
}
Add the ID sidemenu to your component to be able to reference it better. Then, create a javascript function to toggle the sidemenu state (recommend using Jquery):
toggleSidemenu = () => {
$("#sidemenu").toggleClass("hide");
}
You can also create functions to always close or always open it, using $("#sidemenu").removeClass("hide"); and $("#sidemenu").addClass("hide");, they may come in handy.
Call the toggleSidemenu function wherever you want to toggle it, like in a header button or whenever you change pages.
I also recommend adding a transition so that the transition between states is smooth, it looks a lot better. ;)
#sidemenu {
position: fixed;
width: 200px;
height: 100%;
background: #391E57;
padding: 30px 0;
-webkit-transition: width 2s
transition: width 2s;
}
my menu and menu items content look like this:
http://imgur.com/hvnp8YQ
When you click on menu item, the green panel slides up and show text; menu items and content are connected in JavaScript.
I want to change some class to make green panel show lower than menu items.
.menu ul {
float: right;
}
.menu ul li {
background: #161616;
list-style-type: none;
display: inline-block;
margin: auto;
color: #f7f7f7;
padding: 5px 5px 5px 5px;
font-family: 'Dosis', sans-serif;
cursor: pointer;
}
.menu ul li:not(.active):before {
content: "";
display: block;
width: 0%;
color: #f7f7f7;
border-top: 1px solid transparent;
border-image-slice: 1;
transition: width .3s ease-in-out 0s;
margin-bottom: 5px;
}
.menu ul li:not(.active):focus:before,
.menu ul li:not(.active):hover:before {
color: #f7f7f7;
border-top: 1px solid transparent;
border-image: linear-gradient(to right, #529ecc, #9CF5A6);
border-image-slice: 1;
width: 100%;
}
.menu .panel {
display: none;
background: #33b1a2;
padding: 30px;
width: 50%;
}
.menu .panel.active {
display: block;
width: 50%;
}
.active {
color: #f7f7f7;
border-top: 1px solid transparent;
border-image: linear-gradient(to right, #529ecc, #9CF5A6);
border-image-slice: 1;
margin-bottom: 5px;
}
<div class="menu">
<ul class="main">
<li rel="onas" class="active">
O NAS
</li>
<li rel="zajmujemysie">
ZAJMUJEMY SIĘ
</li>
<li rel="oferta">
OFERTA
</li>
</ul>
<div id="onas" class="panel active">
O NAS - ...
</div>
<div id="zajmujemysie" class="panel">
ZAJMUJEMY SIĘ - ...
</div>
<div id="oferta" class="panel">
OFERTA - ...
</div>
</div>
It doesn't matter which class I change, green panel and menu items shows always in the same line.
Add clear: both to the div with the id of 'onas':
#onas {
clear: both;
}
This clears the floats and ensures that the onas div will be placed below the menu.
Here is the html code:
<div class="main-nav main-nav-default">
<div class="container">
<div class="main-nav-logo">
<a class="logo-color" href="index.html">Centaur <span class="brand">Research</span></a>
</div>
<div class="main-nav-links">
<ul id="responsive">
<li>Home</li>
<li>About</li>
<li class="dropdown">Services
<ul class="dropdown-lists">
<li>Research Sector</li>
<li>Online Research</li>
<li>Travel Research</li>
</ul>
</li>
<li class="dropdown">Panel
<ul class="dropdown-lists">
<li>Discussion Group</li>
</ul>
</li>
<li>Contact</li>
<li class="dropdown">Language
<ul class="dropdown-lists">
<li><div class="translate"><div id="google_translate_element"></div></div> <script type="text/javascript">
function googleTranslateElementInit() {
new google.translate.TranslateElement({pageLanguage: 'en', layout: google.translate.TranslateElement.InlineLayout.SIMPLE, gaTrack: true, gaId: 'UA-38654447-1'}, 'google_translate_element');
}
</script><script type="text/javascript" src="//translate.google.com/translate_a/element.js?cb=googleTranslateElementInit"></script></li>
</ul>
</li>
</li>
</ul>
</div>
</div>
Here is the jQuery:
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
$(".dropdown-lists").mouseleave(function(){
$(this).slideUp();
});
});
Basically the thing is that the dropdown works perfectly when I hover over it but it doesnt disappear unless I hover over the submenu thats .dropdown-lists class. If I hover over the .dropdown class and navigates away without hovering over the submenu the submenu doesn't disappear. It stays still unless I hover it over at least once.
I understand my jQuery only allows to slide the menu Up when it is hovered once, I want to know a code combination that would work even if I don't hover over the submenu.
Additionally here is the Dropdown CSS code, I doubt the the submenu somehow is not a child element of the parent main-nav-link or #responsive:
.main-nav-links {
padding: 20px 0px 20px 0px;
}
#responsive {
text-align: right;
}
#responsive li {
position: relative;
text-align: right;
display: inline-block;
}
#responsive li > a {
font-family: "Open Sans";
font-weight: 700;
padding-right: 10px;
font-size: 14px;
letter-spacing: 2px;
text-transform: uppercase;
text-decoration: none;
color: #fff;
-webkit-transition: all 0.3s;
-moz-transition: all 0.3s;
-ms-transition: all 0.3s;
-o-transition: all 0.3s;
transition: all 0.3s;
}
#media (max-width: 992px){
#responsive li > a {
font-size: 12px;
}
}
#responsive li > a:hover {
color: #19B5FE;
}
.dropdown-lists {
text-align: center;
}
#responsive li .dropdown-lists li {
list-style: none;
margin-left: -29px!important;
border-top: 1px solid rgba(60,60,60,0.9);
padding: 10px 0px 10px 0px;
}
#responsive li .dropdown-lists li > a {
color: rgba(204,204,204,0.8);
font-size: 12px;
font-weight: 400;
}
#responsive li .dropdown-lists li > a:hover{
color: #fff;
}
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 200%;
background: rgba(51, 51, 51, 0.8);
}
Update your jquery like this.
$(".dropdown-lists").hide();
$(".dropdown").mouseenter(function(){
$(this).find(".dropdown-lists").slideDown();
}).mouseleave(function(){
$(this).find(".dropdown-lists").slideUp();
});
DEMO
EDIT:
Additional problem comes for the dropdown in your latest fiddle because of the top property you have used in the dropdown CSS. Update the following class in your CSS.
#responsive li .dropdown-lists {
width: 200px;
position: absolute;
top: 100%; /* It was 200% earlier */
background: rgba(51, 51, 51, 0.8);
}
.dropdown
{
height:40px;
}
Updated DEMO
I want to make my menu so that when I am at a certain window size, like on mobile, my menu will convert to a vertical drop down accordion menu. I am familiar with media queries and responsive/adaptive designs, but I can't get my submenu to vertically drop/slide down, either on hover or click.
Here is my Fiddle
HTML:
<!--MENU UNDER HEADER BEGINS-->
<table id="menubar" width="0" border="0" align="center" cellpadding="0" cellspacing="0">
<tr>
<td>
<div id="navmenu"> <!--#navmenu DIV menu contents start here-->
<ul>
<li>
HOME
</li>
<li>
ABOUT ME
</li>
<li class="slidedown">
GRAPHIC DESIGN
<ul>
<li>Hobbyist/Independent</li>
<li>Job & FreeLance</li>
<li>University At Buffalo</li>
</ul>
</li>
<li class="slidedown">
WEB DESIGN
<ul>
<li>Hobbyist/Independent</li>
<li>Job & FreeLance</li>
<li>University At Buffalo Website</a></li>
</ul>
</li>
<li class="slidedown">
PHOTOGRAPHY
<ul>
<li>Hobbyist/Independent</li>
<li>Job & Freelance</li>
<li>Student Projects</li>
</ul>
</li>
<li>
CONTACT ME
</li>
</ul>
</div> <!--#navmenu DIV menu contents end here-->
</td>
</tr>
</table>
<!--menu under header ends-->
CSS:
html, body {
height: 100%;
overflow-x:hidden;
overflow-y:hidde;
margin:auto;
}
#wrap {
margin:auto;
min-height: 100%;
background-image: url(style/flourish-bg.png);
background-repeat:no-repeat;
background-position: top center;
z-index:0;
}
#header {
width:1024px;
height:160px;
background-repeat: no-repeat;
}
#bgheader {
background-image: url(style/bgheader.jpg);
background-repeat:repeat-x;
height:160px;
}
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
background-repeat: no-repeat;
background:#000;
}
/*----------MENU-----------*/
/*main menu*/
a:link {color:#fff; text-decoration:none;}
a:visited {color: #868D65;}
a:hover {color:#000;}
a:active {color: #868D65;}
#navmenu {
width:100%;
height:80px;
margin-right:auto;
margin-left:auto;
}
/*holds the listed items on main menu*/
#navmenu ul {
width:100%;
margin:0;
padding: 0;
list-style:none;
text-decoration:none;
}
/*keeps main menu horiztonal, and effects the actualy list items, overrides any other menu float*/
#navmenu li {
float:left;
padding: 30px 7px;
position:relative;
list-style:none;
text-decoration:none;
font-family: Georgia, "Times New Roman", Times, serif;
font-size:12px;
text-decoration: none;
border-top: 2px solid #868D65;
border-bottom: 2px solid #868D65;
transition: border-radius 1s, background 1s;
-moz-transition: -moz-border-radius 1s, background 1s;
-webkit-transition: -webkit-border-radius 1s, background 1s;
z-index:200;
}
/*menu styling for hover, WHEN IMAGE IS ADDED, IT APPLIES TO ALL HOVER ACTIONS ON EVERY MENU*/
#navmenu li:hover {
background: #eee;
background-image: url(style/bgheader.jpg);
transition: border-radius 1s, background 1s;
-moz-transition: -moz-border-radius 1s, background 1s;
-webkit-transition: -webkit-border-radius 1s, background 1s;
z-index:200;
}
/*SUB MENU STARTS*/
/*this hides the submenu*/
#navmenu li ul {
position: absolute;
top:75px;
visibility:hidden;
padding-left:0px;
}
/*this shows the submenu on hover over main menu*/
#navmenu li:hover ul {visibility:visible;}
/*sub menu styling*/
#navmenu li ul li {
float:none;
width: 160px;
font-size:12px;
text-align:center;
padding: 15px 5px 10px 5px;
background: #222222;
border: 1px solid #FFF;
color: #FFF;
position:relative;
margin-left: -6px;
}
/*sub menu styling for hover*/
#navmenu li ul li:hover {
font-size:12px;
color: #000;
background-color: #868D65;
}
Here you go
#media (max-width:600px) {
tr td #navmenu li {
width:100%; // makes each item takes up the whole screen
}
tr td #navmenu li ul {
position:relative !important; // removes the position absolute so that it doesn't overlap the higher up menu items
top:0; // puts it right next to the menu item
display:none; // so there is no unnecessary white space when the `li` isn't being hovered over
}
tr td #navmenu li:hover ul {
display:block; // shows the submenu when you hover over the higher `li`s
}
}
put something like this in your mobile layout's media query
#navmenu li {
display: block;
text-align: center;
float:none;
}
#navmenu li ul {
display: none;
position: relative;
top:0;
visibility:hidden;
}
since your technique on how to show submenu is purely css (:hover on parent and visibility:visible), we need js/jquery because our child menu is display:none now
$('li.slidedown').hover(function() {
$(this).find('ul').slideDown();
}, function() {
$(this).find('ul').slideUp();
});
havent checked my codes, byt i hope you got my point