Hi I've tried searching for this but just can't find the right coding. Can someone help?
This is my site currently in test mode : http://www.rockclick.co.uk/wiss/index.htm .
As you can see I have hoverable menus. But my sub menus under the "Galleries" hover menu don't hover I have to click on them in my PC browser (google chrome). On my iphone the submenus aren't even clickable. (I've added a script to fix the hover bug for IOS).
I'm very reluctant to re-write the whole thing again. Is there an easy fix to just make my sub menus hoverable??
I'm very much a novice at this stuff so any help would be greatly appreciated.
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l){var i,s={touchend:function(){}};for(i in s)l.addEventListener(i,s)})(document); // sticky hover fix in iOS
<style>
#menu {background: #F9F3DB; color: #6D6C6B; height: 35px; border-bottom: 0px solid #6D6C6B}
#menu ul,
#menu li {margin: 0 0; padding: 0 0; list-style: none}
#menu ul {height: 35px}
#menu li {float: left; display: inline; position: relative; font: bold 12px Arial; text-shadow: 0 0px 0 #6D6C6B; border-right: 0px solid #444;
border-left: 0px solid #111; text-transform: uppercase}
#menu li:first-child {border-left: none}
#menu a {display: block; line-height: 35px; padding: 0 14px; text-decoration: none; color: #6D6C6B;}
#menu li:hover > a,
#menu li a:hover {background: #F9F3DB}
#menu input { display: none; margin: 0 0; padding: 0 0; width: 80px; height: 35px; opacity: 0; cursor: pointer}
#menu label {font: bold 30px Arial; display: none; width: 35px; height: 36px; line-height: 36px; text-align: center}
#menu label span {font-size: 12px; position: absolute; left: 35px}
#menu ul.menus {height: auto; width: auto; background: #F9F3DB; position: absolute; z-index: 99; display: none; border: 0;}
#menu ul.menus li {display: block; width: 100%; font: 12px Arial; text-transform: none;}
#menu li:hover ul.menus {display: block}
#menu a.home {background: #c00;}
#menu a.prett {padding: 0 27px 0 14px}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px}
#menu ul.menus a:hover {background: #F9F3DB;}
#menu ul.menus .submenu {display: none; position: absolute; left: 100px; background: #F9F3DB; top: 0; width: 150px;}
#menu ul.menus .submenu li {background: #F9F3DB;}
#menu ul.menus .has-submenu a.open ~ .submenu {display: block;}
</style>
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul></li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul></li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
</ul></li>
</nav>
</body>
Consider declaring an additional :hover state rule for nested submenu elements, this can be chained onto the existing submenu :hover state rule, e.g:
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block;
}
Code Snippet Demonstration:
document.addEventListener('click', function(e) {
e = e || window.event;
console.log(e);
var target = e.target || e.srcElement;
console.log(target);
if (target.parentElement.className.indexOf('has-submenu') > -1) {
e.target.classList.toggle('open');
}
}, false);
<!----------------ios-hover-fix----------->
(function(l) {
var i, s = {
touchend: function() {}
};
for (i in s) l.addEventListener(i, s)
})(document); // sticky hover fix in iOS
#menu {
background: #F9F3DB;
color: #6D6C6B;
height: 35px;
border-bottom: 0px solid #6D6C6B
}
#menu ul,
#menu li {
margin: 0 0;
padding: 0 0;
list-style: none
}
#menu ul {
height: 35px
}
#menu li {
float: left;
display: inline;
position: relative;
font: bold 12px Arial;
text-shadow: 0 0px 0 #6D6C6B;
border-right: 0px solid #444;
border-left: 0px solid #111;
text-transform: uppercase
}
#menu li:first-child {
border-left: none
}
#menu a {
display: block;
line-height: 35px;
padding: 0 14px;
text-decoration: none;
color: #6D6C6B;
}
#menu li:hover>a,
#menu li a:hover {
background: #F9F3DB
}
#menu input {
display: none;
margin: 0 0;
padding: 0 0;
width: 80px;
height: 35px;
opacity: 0;
cursor: pointer
}
#menu label {
font: bold 30px Arial;
display: none;
width: 35px;
height: 36px;
line-height: 36px;
text-align: center
}
#menu label span {
font-size: 12px;
position: absolute;
left: 35px
}
#menu ul.menus {
height: auto;
width: auto;
background: #F9F3DB;
position: absolute;
z-index: 99;
display: none;
border: 0;
}
#menu ul.menus li {
display: block;
width: 100%;
font: 12px Arial;
text-transform: none;
}
#menu li:hover ul.menus, #menu li.has-submenu:hover ul.submenu {
display: block
}
#menu a.home {
background: #c00;
}
#menu a.prett {
padding: 0 27px 0 14px
}
#menu a.prett::after {
content: "";
width: 0;
height: 0;
border-width: 5px 6px;
border-style: solid;
border-color: #6D6C6B transparent transparent transparent;
position: absolute;
top: 15px;
right: 9px
}
#menu a.prett.open::after {
content: "";
width: 0;
height: 0;
border-width: 6px 5px;
border-style: solid;
border-color: transparent transparent #6D6C6B transparent;
position: absolute;
top: 9px;
right: 9px
}
#menu ul.menus a:hover {
background: #F9F3DB;
}
#menu ul.menus .submenu {
display: none;
position: absolute;
left: 100px;
background: #F9F3DB;
top: 0;
width: 150px;
}
#menu ul.menus .submenu li {
background: #F9F3DB;
}
#menu ul.menus .has-submenu a.open~.submenu {
display: block;
}
<!------------NAVIGATION-BAR------>
<body>
<nav>
<ul id='menu'>
<li>Home</li>
<li>News</li>
<li><a class='prett' href='#' title='Info'>Information</a>
<ul class='menus'>
<li>About Us</li>
<li>Statistics</li>
<li>Downloads</li>
<li>Sponsorship</li>
<li>Race Calendar</li>
<li>Race Results</li>
</ul>
</li>
<li><a class='prett' href='#' title='Info'>Meet The Team</a>
<ul class='menus'>
<li>The Team</li>
<li>The Coaches</li>
<li>The Committee</li>
</ul>
</li>
<li><a class='prett' href='#' title='Galleries'>Galleries</a>
<ul class='menus'>
<li class='has-submenu'><a class='prett' title='Photos'>Photos</a>
<ul class='submenu'>
<li>2017</li>
<li>2016</li>
<li>2015</li>
</ul>
</li>
<li class='has-submenu'><a class='prett' title='Archives'>Media</a>
<ul class='submenu'>
<li>Press Reports</li>
<li>Archived Press</li>
</ul>
</li>
<li><a href="team photos.htm" target="iframe" title='Team Photos'>Team Photos</a></li>
<li><a href="videos.htm" target="iframe" title='Videos'>Videos</a></li>
<li class='has-submenu'><a class='prett' title='Archives'>Archives</a>
<ul class='submenu'>
<li>1980's</li>
<li>1990's</li>
<li>2000's</li>
</ul>
</li>
</ul>
</li>
<li>Contact Us</li>
<li>Links</li>
</ul>
</nav>
</body>
Add the following line to your CSS code. It should fix it.
.menus li a:hover ~ .submenu {display: block !important;}
Related
Ok guys so i have this template with me. But i can't figure out how to shift the position of logo to left and the menu accordingly. I also want to change the background color to white.. I'm able to do the rest of the changes myself..
$(document).ready(function() {
/* MAIN MENU */
$('#main-menu > li:has(ul.sub-menu)').addClass('parent');
$('ul.sub-menu > li:has(ul.sub-menu) > a').addClass('parent');
$('#menu-toggle').click(function() {
$('#main-menu').slideToggle(300);
return false;
});
$(window).resize(function() {
if ($(window).width() > 700) {
$('#main-menu').removeAttr('style');
}
});
});
a {
color: #23dbdb;
text-decoration: none;
}
a:hover {
color: #000;
}
ol, ul {
list-style: none;
padding:0px;
margin:0px;
}
#wrap {
margin: 0 auto;
}
.inner {
margin: 0 auto;
max-width: 940px;
padding: 0 40px;
}
.relative {
position: relative;
}
.right {
float: right;
}
.left {
float: left;
}
/* HEADER */
#wrap > header {
background-color: #333;
padding-bottom: 20px;
}
.logo {
display: inline-block;
font-size: 0;
padding-top: 15px;
}
#navigation {
position: absolute;
right: 40px;
bottom: 0px;
}
#menu-toggle {
display: none;
float: right;
}
/* HEADER > MENU */
#main-menu {
float: right;
font-size: 0;
margin: 10px 0;
}
#main-menu > li {
display: inline-block;
margin-left: 30px;
padding: 2px 0;
}
#main-menu > li.parent {
background-image: url(../images/plus-gray.png);
background-size: 7px 7px;
background-repeat: no-repeat;
background-position: left center;
}
#main-menu > li.parent > a {
padding-left: 14px;
}
#main-menu > li > a {
color: #eee;
font-size: 14px;
line-height: 14px;
padding: 30px 0;
text-decoration: none;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
color: #23dbdb;
}
/* HEADER > MENU > DROPDOWN */
#main-menu li {
position: relative;
}
ul.sub-menu { /* level 2 */
display: none;
left: 0px;
top: 38px;
padding-top: 10px;
position: absolute;
width: 150px;
z-index: 9999;
}
ul.sub-menu ul.sub-menu { /* level 3+ */
margin-top: -1px;
padding-top: 0;
left: 149px;
top: 0px;
}
ul.sub-menu > li > a {
background-color: #333;
border: 1px solid #444;
border-top: none;
color: #bbb;
display: block;
font-size: 12px;
line-height: 15px;
padding: 10px 12px;
}
ul.sub-menu > li > a:hover {
background-color: #2a2a2a;
color: #fff;
}
ul.sub-menu > li:first-child {
border-top: 3px solid #23dbdb;
}
ul.sub-menu ul.sub-menu > li:first-child {
border-top: 1px solid #444;
}
ul.sub-menu > li:last-child > a {
border-radius: 0 0 2px 2px;
}
ul.sub-menu > li > a.parent {
background-image: url(../images/arrow.png);
background-size: 5px 9px;
background-repeat: no-repeat;
background-position: 95% center;
}
#main-menu li:hover > ul.sub-menu {
display: block; /* show the submenu */
}
The CSS Responsive Style
#media all and (max-width: 700px) {
#navigation {
position: static;
margin-top: 20px;
}
#menu-toggle {
display: block;
}
#main-menu {
display: none;
float: none;
}
#main-menu li {
display: block;
margin: 0;
padding: 0;
}
#main-menu > li {
margin-top: -1px;
}
#main-menu > li:first-child {
margin-top: 0;
}
#main-menu > li > a {
background-color: #333;
border: 1px solid #444;
color: #bbb;
display: block;
font-size: 14px;
padding: 12px !important;
padding: 0;
}
#main-menu li > a:hover {
background-color: #444;
}
#main-menu > li.parent {
background: none !important;
padding: 0;
}
#main-menu > li:hover > a,
#main-menu > li.current-menu-item > a {
border: 1px solid #444 !important;
color: #fff !important;
}
ul.sub-menu {
display: block;
margin-top: -1px;
margin-left: 20px;
position: static;
padding: 0;
width: inherit;
}
ul.sub-menu > li:first-child {
border-top: 1px solid #444 !important;
}
ul.sub-menu > li > a.parent {
background: #333 !important;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="wrap">
<header>
<div class="inner relative">
<a class="logo" href="https://www.freshdesignweb.com"><img src="images/logo.png" alt="fresh design web"></a>
<a id="menu-toggle" class="button dark" href="#"><i class="icon-reorder"></i></a>
<nav id="navigation">
<ul id="main-menu">
<li class="current-menu-item">Home</li>
<li class="parent">
Features
<ul class="sub-menu">
<li><i class="icon-wrench"></i> Elements</li>
<li><i class="icon-credit-card"></i> Pricing Tables</li>
<li><i class="icon-gift"></i> Icons</li>
<li>
<a class="parent" href="#"><i class="icon-file-alt"></i> Pages</a>
<ul class="sub-menu">
<li>Full Width</li>
<li>Left Sidebar</li>
<li>Right Sidebar</li>
<li>Double Sidebar</li>
</ul>
</li>
</ul>
</li>
<li>Portfolio</li>
<li class="parent">
Blog
<ul class="sub-menu">
<li>Large Image</li>
<li>Medium Image</li>
<li>Masonry</li>
<li>Double Sidebar</li>
<li>Single Post</li>
</ul>
</li>
<li>Contact</li>
</ul>
</nav>
<div class="clear"></div>
</div>
</header>
</div>
At first you have to change for web view bellow css code for left position for nav. Also logo should be remove otherwise logo & menu overlap if you want to logo is left position.
#navigation {
position: absolute;
left: 40px;
bottom: 0px;
}
Also you want to change your menu bar background color then change to this css code
#wrap > header {
background-color: #fff;
}
Note: If you do that you should be change your menu font color like black otherwise your font menu font color & menu background color looking messy.
I was wondering how I can make a dropdown look like the one on http://www.brotherbots.com/ in mobile and desktop view. I combined some examples from w3schools. It works in desktop view but not in mobile. I don't particulary like the styling but I think I can fix it myself. Also is this the best way to do it?
I have a jsfiddle here.
function myFunction() {
var x = document.getElementById("myTopnav");
if (x.className === "topnav") {
x.className += " responsive";
} else {
x.className = "topnav";
}
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
}
li {
float: left;
}
li a,
.dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}
.dropdown-content a:hover {
background-color: #f1f1f1
}
.dropdown:hover .dropdown-content {
display: block;
}
ul.topnav li a:hover {
background-color: #555;
}
ul.topnav li.icon {
display: none;
}
#media screen and (max-width: 460px) {
ul.topnav li:not(:first-child) {
display: none;
}
ul.topnav li.icon {
float: right;
display: inline-block;
}
}
#media screen and (max-width: 460px) {
ul.topnav.responsive {
position: relative;
}
ul.topnav.responsive li.icon {
position: absolute;
right: 0;
top: 0;
}
ul.topnav.responsive li {
float: none;
display: inline;
}
ul.topnav.responsive li a {
display: block;
text-align: left;
}
}
<ul class="topnav" id="myTopnav">
<li><a class="active" href="#home">Home</a>
</li>
<li>News
</li>
<li>Contact
</li>
<li>About
</li>
<li class="dropdown">
Dropdown
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</li>
<li class="icon">
☰
</li>
</ul>
<div style="padding-left:16px">
<h2>Responsive Topnav Example</h2>
<p>Resize the browser window to see how it works.</p>
</div>
you can use meterialised drop down....
for eg
css
$grey: #9e9e9e;
$plum: #8e44ad;
$shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.16), 0 2px 8px 0 rgba(0, 0, 0, 0.12);
h1, a, li {
font-family: Roboto, sans-serif;
}
h1 {
font-size: 26px;
background: lighten($plum, 5%);
color: white;
padding: 40px 0 40px 20%;
margin-bottom: 50px;
}
a, li {
color: darken($grey, 20%);
text-decoration: none;
}
.nav {
margin-left: 20%;
> li {
display: inline-block;
padding: 1em 18px;
cursor: pointer;
&:hover {
background: lighten($grey, 30%);
}
}
}
.drop {
position: relative;
ul {
position: absolute;
left: 0;
top: 3em;
transition: all 0.3s ease;
transform: scale(0);
transform-origin: 0 0;
box-shadow: $shadow;
li {
display: block;
width: 100%;
a {
width: 100%;
padding: 1em 18px;
display: inline-block;
white-space: pre;
box-sizing: border-box;
&:hover {
background: lighten($grey, 30%);
}
}
}
}
&:hover {
ul {
transform: scale(1);
}
}
}
//---------------------------------------------
.follow {
width: 42px;
height: 42px;
border-radius: 50px;
background: #03A9F4;
display: block;
margin: 300px auto 0;
white-space: nowrap;
padding: 13px;
box-sizing: border-box;
color: white;
transition: all 0.2s ease;
font-family: Roboto, sans-serif;
text-decoration: none;
box-shadow: 0 5px 6px 0 rgba(0,0,0,0.2);
i {
margin-right: 20px;
transition: margin-right 0.2s ease;
}
&:hover {
width: 134px;
i {
margin-right: 10px;
}
}
}
#media screen and (max-width: 800px) {
.follow {
margin: 400px auto 0;
}
}
html
<h1>Material Design CSS Only Dropdown Menu</h1>
<ul class="nav">
<li>Home</li>
<li>Portfolio</li>
<li class="drop">Drop
<ul>
<li>Art</li>
<li>Coding</li>
<li>Design</li>
<li>Web Development</li>
</ul>
</li>
<li>Contact</li>
</ul>
<a class="follow" href="https://twitter.com/mildrenben" target="_blank"><i class="fa fa-twitter"></i>Follow Me</a>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link href='http://fonts.googleapis.com/css?family=Roboto:400,500,300,700' rel='stylesheet' type='text/css'>
I would recommend checking out Bootstrap. It will help if you're not a fan of styling and they have good documentation on their website for the navbar section. Unfortunately they do not have the 'responsiveness' your looking for but I found a JSFiddle where someone adds CSS for this reason.
.sidebar-nav {
padding: 9px 0;
}
.dropdown-menu .sub-menu {
left: 100%;
position: absolute;
top: 0;
visibility: hidden;
margin-top: -1px;
}
.dropdown-menu li:hover .sub-menu {
visibility: visible;
}
.dropdown:hover .dropdown-menu {
display: block;
}
.nav-tabs .dropdown-menu, .nav-pills .dropdown-menu, .navbar .dropdown-menu {
margin-top: 0;
}
.navbar .sub-menu:before {
border-bottom: 7px solid transparent;
border-left: none;
border-right: 7px solid rgba(0, 0, 0, 0.2);
border-top: 7px solid transparent;
left: -7px;
top: 10px;
}
.navbar .sub-menu:after {
border-top: 6px solid transparent;
border-left: none;
border-right: 6px solid #fff;
border-bottom: 6px solid transparent;
left: 10px;
top: 11px;
left: -6px;
}
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
</head>
<ul class="nav nav-pills">
<li class="active">Regular link</li>
<li class="dropdown">
Dropdown <b class="caret"></b>
<ul class="dropdown-menu" id="menu1">
<li>
2-level Menu <i class="icon-arrow-right"></i>
<ul class="dropdown-menu sub-menu">
<li>Action</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li class="nav-header">Nav header</li>
<li>Separated link</li>
<li>One more separated link</li>
</ul>
</li>
<li>Another action</li>
<li>Something else here</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li class="dropdown">
Menu
</li>
<li class="dropdown">
Menu
</li>
</ul>
Hope this helps.
I have to make dropdown always align center, according to the parent tag. Any help would be greatly appreciated.
The example is given below:
Fiddle Link: http://jsfiddle.net/abidkhanweb/ojxpt4m2/
You can do something like this:
#menu {
border-bottom: 1px solid #DDD;
color: #fff;
display: block;
float: right;
height: 18pt;
line-height: 18pt;
list-style-type: none;
text-transform: uppercase;
width: 100%;
font-size:14px;
position:absolute;
}
#menu > li{
background-color: #003399;
border: 1px solid #DDD;
margin-top:-1px;
float: right;
position: relative;
margin-left: 1%;
padding-left: 2%;
padding-right: 2%;
}
#menu li:hover {
opacity: 0.8;
}
#menu li .wrapper .submenu {
display: block;
margin-left: 50%;
width:100%;
}
#menu li .wrapper {
display: block;
position: absolute;
top: 19pt;
right: 50%; /*this will center the div*/
white-space: nowrap;
}
#menu li:hover .wrapper .submenu {
display: block;
}
.submenu li {
display: inline-block;
padding-left: 1.5%;
white-space: nowrap;
opacity: 0.7;
}
.submenu li a {
padding-right: 3%;
padding-left: 3%;
background-color: #000;
display: inline-block;
}
#menu ul {
list-style-type:none;
list-style-image:none;
margin:0px;
padding:0px;
}
#menu li.topmenu {
float:left;
}
.topmenu a {
float:left;
width:110px;
text-align:center;
color:#C37000;
padding:1px 5px;
border-collapse:collapse;
font-weight:bold;
text-decoration:none;
margin:0;
}
.topmenu ul{
display:none;
}
.submenu a{
padding:1px 5px;
border:1px solid #C37000;
border-collapse:collapse;
color:#C37000;
font-weight:bold;
text-decoration:none;
background-color:#7F4800;
margin:0;
width:100%;
}
.submenu a:hover {
color:#4C4C4C;
background-color:#ffddbb !important;
}
.topmenu:hover ul {
display:block;
z-index:500;
}
<ul id="menu">
<li class="topmenu">Menu 1</li>
<li class="topmenu">Menu 2
</li>
<li class="topmenu">Policies
<div class="wrapper">
<ul >
<li class="submenu"><a>Field 1</a></li>
<li class="submenu"><a>Field 2</a></li>
<li class="submenu"><a>Field 3</a></li>
<li class="submenu"><a>Field 4</a></li>
</ul>
</div>
</li>
<li class="topmenu">Menu 4</li>
</ul>
I assume you have applied position: absolute to the dropdown, for you to position it to the left, set the left property to the value of your padding for the policies container like so:
nav {
background: orange;
}
ul {
margin: 0;
padding: 0;
list-style-type: none;
}
nav > ul > li {
position: relative;
top: 0;
left: 0;
margin-left: 50px;
}
nav > ul > li > a {
display: inline-block;
color: white;
text-decoration: none;
padding: 5px 10px;
background: green;
}
nav > ul ul {
background: #eee;
border: 1px solid #000;
padding: 10px;
position: absolute;
left: -10px;
}
<nav>
<ul>
<li>Policies
<ul>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
<li>Policy 1</li>
</ul>
</li>
</ul>
</nav>
I am following up on this question and answer:
Sub-menu expanding parent div instead of displaying on top
If there is a div below the menu in the example above, how do you keep 1) that div contents from moving around, and 2) the size of the div from moving around, yet keep it responsive?
For example I forked the js fiddle from the link above and created the div id="mytest". I'd like the menu and the "mytest" div to be completely independent when you hover over the "About Me" link. Here is my fork: http://jsfiddle.net/nXqn8/
Here is the code:
<div id="menu">
<ul>
<li><a id="" class="" href="">Home</a></li>
<li><a id="" class="" href="">About Me</a>
<ul class="sub-menu">
<li>Biography</li>
<li>Photo Galery</li>
<li>Foot Print</li>
</ul>
</li>
<li><a id="" class="" href="">Expertise</a></li>
<li><a id="" class="" href="">Projects</a>
<ul class="sub-menu">
<li>Geo 228 Portal</li>
<li>NEP Application</li>
<li>Geo Address Book</li>
<li>Assets Management</li>
</ul>
</li>
<li><a id="" class="" href="">Contact</a></li>
</ul>
</div>
<div id="mytest"> xxxxxxxxxxxxxxxxxxxxxxxxxx Please stop me from moving around!!! xxxxxxxxxxxxxxxxxxxxxxxxxxxxxx </div>
css:
#menu {
position: relative;
font-size: 0.8em;
margin: 0;
padding: 0;
background-color: #666666;
border-top: 1px solid #999;
border-bottom: 1px solid #999;
overflow: visible;
z-index: 2;
height: 35px;
}
#menu ul {
position: relative;
margin: 0;
padding: 0;
list-style: none;
z-index: 3;
}
#menu li {
display: block;
width: 120px;
float: left;
border-right: 1px solid #999;
z-index: 4;
}
#menu a {
color: #ffffff;
font-weight: bold;
display: block;
text-align: center;
text-decoration: none;
text-transform: uppercase;
margin: 0;
padding: 10px 20px;
}
#menu a:hover {
color: #000000;
margin: 5px 10px;
padding: 5px 10px;
background-color: #C0C0C0;
border-radius: 10px;
}
#menu ul.sub-menu {
display: none;
position: relative;
}
#menu ul.sub-menu li {
width: 200px;
background-color: #C0C0C0;
border-width: 0 1px 1px 1px;
border-style: solid;
border-color: #666666;
}
#menu ul.sub-menu li a {
color: #000;
text-align: center;
margin: 5px 10px;
padding: 5px 10px;
}
#menu ul.sub-menu li a:hover {
color: snow;
background-color: #666666;
}
#menu li:hover ul.sub-menu {
display: block;
z-index: 90;
}
#mytest {
background-color: red;
}
Ultimately, I have after something like the main menus you see at the top of accenture dot com.
Thanks!
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
#mytest {
float:left;
background-color: red;
width:100%;
text-align: center;
}
DEMO
Define your #menu li position: relative and define your sub menu #menu ul.sub-menu position: absolute; left: 0; top: 100%;
as this css
#menu li {
position:relative;
}
#menu ul.sub-menu {
display: none;
position: absolute;
left: 0;
top: 100%;
}
Demo
I'm trying to create custom drop-down select like the one used on twitter when user logs out and till now I did not succeed :
This is what I achieved but is not working on IE9 :|
http://fiddle.jshell.net/Hz2JH/
<ul id="main">
<li class="username" tabindex="1" >
<a>USER</a>
<ul class="curent_buser">
<li class="help">Help</li>
<li class="logoff">Log Off</li>
</ul>
</li>
</ul>
ul#main {
color: 232323;
width: 120px;
border:2px solid #ccc;
list-style: none;
font-size: 12px;
letter-spacing: -1px;
font-weight: bold;
text-decoration: none;
height:30px;
background:#f1f1f1;
}
ul#main:hover {
opacity: 0.7;
text-decoration: none;
}
#main > li{
background: url('http://cdn1.iconfinder.com/data/icons/crystalproject/24x24/actions/1downarrow1.png') 100% 0 no-repeat;
outline:0;
padding:10px;
}
ul#main li ul {
display: none;
width: 116px;
background: transparent;
border-top: 1px solid #eaeaea;
padding: 2px;
list-style: none;
margin: 7px 0 0 -3px;
}
ul.curent_buser li a {
color: gray;;
cursor: pointer;
}
ul.curent_buser{
background:lime !important;
}
ul#main li ul li a {
display: block;
padding: 5px 0;
position: relative;
z-index: 5;
}
#main li:focus ul, #main li.username:active ul {
display: block;
}
.help{
background: url("http://cdn1.iconfinder.com/data/icons/musthave/16/Help.png") no-repeat 100% center ;
height: 25px;
margin-bottom: 2px;
border-bottom: 1px solid white;
}
.help:hover{
background: #f4f4f4;
}
.logoff{
background: url("http://cdn1.iconfinder.com/data/icons/cc_mono_icon_set/blacks/16x16/on-off.png") no-repeat 100% center ;
height: 25px;
}
.logoff:hover{
background: #f4f4f4 ;
height: 25px;
}
.help a,.logoff a{
color:gray;
font-family: Museo700Regular,sans-serif;
letter-spacing: 0;
font-size: small;
}
So how can I build a custom select like the one used on twitter?
This works for me, doesnt require a click to get the drop down. Just add li elements to put the custom images on each menu item. Straight CSS and works on all browsers I have tested, if you find a browser that doesnt work let me know please.
#addMenu, #addMenu ul {
list-style: none;
}
#addMenu {
float: left;
}
#addMenu > li {
float: left;
}
#addMenu li a {
display: block;
padding: 0 8px;
text-decoration: none;
}
#addMenu ul {
position: absolute;
display: none;
z-index: 999;
}
#addMenu ul li a {
width: 70px;
color: #000;
font-weight: bold;
}
#addMenu li:hover ul.noJS {
display: block;
background: #ccc;
color: #000;
}
#addMenu ul li:hover a {
background: #ddd;
}
HTML
<ul id='addMenu'>
<li>
<a href='#'>MENU</a>
<ul class='noJS'>
<li><a href='URL'>Option1</a></li>
<li><a href='URL'>Option2</a></li>
<li><a href='URL'>Option3</a></li>
<li><a href='URL'>Option4</a></li>
</ul>
</li>
</ul>