I'd like to integrate a menu similar to this one on my website.
The issue is that for some reason I can't get the sub-items of the menu aligned to the left of the main menu item like on the code pen version.
See my JSFiddle: http://jsfiddle.net/Tw9Er/
What is the issue? Thanks
How it looks like on JSFiddle:
How it should look like (like on code pen):
JS:
function dropDown() {
$(this).find('ul').stop().slideToggle();
$(this).find('ul').parent().find('a').toggleClass('activeNav');
$(this).find('ul > li > a').removeClass('activeNav');
}
$('nav ul li ul').hide();
$('nav ul li').mouseenter(dropDown);
$('nav ul li').mouseleave(dropDown);
CSS:
#import url(http://fonts.googleapis.com/css?family=Roboto:400,300,100);
html, body {width: 100%; height: 100%}
body {font-family: 'Roboto'; background: url(http://www.prestonise.com/images/nyc.jpg) no-repeat center center; background-size: cover}
body:after {
content : "";
display: block;
position: absolute;
top: 0;
left: 0;
background: rgba(0,0,0,0.1);
background-size: cover;
width: 100%;
height: 100%;
opacity: 1;
z-index: 1;
-webkit-animation: subtleFade 25s infinite;
animation: subtleFade 25s infinite
}
#-webkit-keyframes subtleFade
{
0% {background: rgba(0,0,0,0)}
50% {background: rgba(0,0,0,0.3)}
100% {background: rgba(0,0,0,0)}
}
#keyframes myfirst
{
0% {background: rgba(0,0,0,0)}
50% {background: rgba(0,0,0,0.3)}
100% {background: rgba(0,0,0,0)}
}
* {box-sizing: border-box}
.wrapper {position: relative; z-index: 5; height: 100%; padding: 20px}
header {margin-top: 20px; text-align: center}
header h1 {font-weight: 100; font-size: 2.5em; color: rgba(255,255,255,0.75)}
nav {margin: 20px auto}
nav ul li {display: inline-block; margin-right: -4px; margin-left: 5px; vertical align: top}
nav a {padding: 7px 10px; text-decoration: none; color: rgba(255,255,255,0.9); background: rgba(0,0,0,0); border-radius: 5px; font-weight: 300; text-transform: uppercase; letter-spacing: 1.5px; font-size: 13px}
nav a:hover {background: rgba(0,0,0,0.25)}
.activeNav {background: rgba(0,0,0,0.25)}
nav ul li ul {position: absolute; display: block; margin-top: 5px; border-radius: 5px; border-top-left-radius: 0; background: none; padding-top: 5px}
nav ul li ul li {display: block; float: none; margin: 0; padding: 0}
nav ul li ul li a {display: block; text-align: left; color: rgba(255,255,255,0.9); text-shadow: 0 1px rgba(0,0,0,0.33); padding: 10px}
nav ul li ul li a:hover {background: rgba(20,150,220,0.5); color: white; text-shadow: 0 1px rgba(0,0,0,0.5)}
.hover a {display: block;}
.hover span { color: rgba(255,255,255,0.9); background: rgba(20,150,220,0.5); border-radius: 5px; position: absolute; display: block; margin: 5px 0 0 -57px; padding: 10px; font-size: 13px; font-weight: 300; letter-spacing: 1.5px; text-transform: uppercase; text-align: center; cursor: default;}
article {width: 80%; display: block; margin: 0 auto; text-align: center}
article span {font-size: 128px; color: rgba(255,255,255,0.75)}
article span span {font-size: 48px; position: absolute; top: 152px; margin-left: -88px; color: rgba(255,255,255,.75)}
footer {position: absolute; bottom: 0px; background: rgba(0,0,0,0.8); width: 100%; padding: 20px 0; text-align: center; color: #ddd; font-weight: 300}
footer span.fa {color: #ea0; display: block; font-size: 25px; margin-bottom: 10px}
Set padding-left to 0 for your ul element. It was fixed using that on fiddle.
http://jsfiddle.net/Tw9Er/1/
EDIT:
If you inspect the element, you will see that you have 40px padding-left from -webkit-padding-start: 40px. So basically, either set the padding-left or -webkit-padding-start to fix the issue.
The reason it works on codepen is because of the padding: 0 line in reset.css file:
Try apply this;
ul {
padding-left: 0px !important;
}
If you consider them as irritating try this;
http://meyerweb.com/eric/tools/css/reset/
And rember that using !important is not a good practite - better take a look where it is being overwritten and replace it.
i have this css and html for a horizontal menu:
.nav > li:hover {
background: #666666;
text-decoration:none;
}
.active {
background: #666666;
text-decoration:none;
}
nav, ul, li, a {
margin: 0;
padding: 0;
}
a {
text-decoration: none;
}
.container {
width: 100%;
margin: 10px auto;
}
.toggleMenu {
display: none;
background: #666666;
padding: 10px 15px;
color: #ffffff;
width:100%;
text-align:center;
}
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
text-align: center;
}
.nav:before,.nav:after {
content: " ";
display: table;
}
.nav:after {
clear: both;
}
.nav ul {
list-style: none;
width: 12em;
}
.nav a {
padding: 10px 15px;
color:#fff;
}
.nav li {
position: relative;
text-align: left;
}
.nav > li {
display: inline-block;
}
.nav > li > .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: right;
}
.nav > li > a {
display: block;
}
.nav li ul {
position: absolute;
left: -9999px;
}
.nav > li.hover > ul {
left: 0;
}
.nav li li.hover ul {
left: 100%;
top: 0;
}
.nav li li a {
display: block;
background: #666666;
position: relative;
z-index:100;
border-top: 1px solid #ffffff;
}
.nav li li li a {
background:#f36f25;
color:#ffffff;
z-index:200;
border-top: 1px solid #ffffff;
}
#media screen and (max-width: 760px) {
.active {
display: block;
}
.nav {
border-top: none;
}
.nav > li {
display: block;
border-top: 1px solid #ffffff;
}
.nav > li > .parent {
background-position: 95% 50%;
}
.nav li li .parent {
background-image: url("/images/downArrow.png");
background-repeat: no-repeat;
background-position: 95% 50%;
}
.nav ul {
display: block;
width: 100%;
}
.nav > li.hover > ul , .nav li li.hover ul {
position: static;
}
}
<a class="toggleMenu" href="#">Menu</a>
<ul class="nav">
<li><span>Homepage</span></li>
<li><span>About Us</span>
<ul>
<li><span>Who Are We?</span></li>
<li><span>Service Status</span></li>
<li><span>Contact Us</span></li>
<li><span>Terms & Conditions</span></li>
</ul>
</li>
</ul>
how can i make the main menu links align right rather than centre?
here is a fiddle: http://jsfiddle.net/B5jtm/
Try this:
.nav {text-align: right;}
Change:
text-align: center;
to:
text-align: right;
in:
.nav {
list-style: none;
*zoom: 1;
background:#f36f25;
text-align: right;
}
jsFiddle example
I removed text-align on the .togglemenu and changed .nav to text-align: right
Please see updated jsFiddle:
http://jsfiddle.net/B5jtm/10/
i have found the code for this: http://media02.hongkiat.com/responsive-web-nav/demo/index.html menu here: http://www.hongkiat.com/blog/responsive-web-nav/
and i am trying to do it with my menu:
CSS:
<style type="text/css">
#trans-nav {list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav { list-style-type: none; height: 40px; padding: 0; margin: 0; }
#trans-nav li { float: left; position: relative; padding: 0; line-height: 40px; }
#trans-nav li:hover { background-position: 0 -40px; }
#trans-nav li a { display: block; padding: 0 15px; color: #666666; text-decoration: none; }
#trans-nav li a:hover { background-color:#F36F25; color: #eeeeee; }
#trans-nav li ul { opacity: 0; position: absolute; left: 0; width: 8em; background: #EEEEEE; list-style-type: none; padding: 0; margin: 0; }
#trans-nav li:hover ul { opacity: 1; }
#trans-nav li ul li { float: none; position: static; height: 0; line-height: 0; background: none; }
#trans-nav li:hover ul li { height: 30px; line-height: 30px; }
#trans-nav li ul li a { background: #EEEEEE; }
#trans-nav li ul li a:hover { background: #666666; color:#EEEEEE; }
#trans-nav li { -webkit-transition: all 0.2s; }
#trans-nav li a { -webkit-transition: all 0.5s; }
#trans-nav li ul { -webkit-transition: all 1s; }
#trans-nav li ul li { -webkit-transition: height 0.5s; }
</style>
HTML:
<ul id="trans-nav">
<li>Home</li>
<li>About</li>
<li>Products
<ul>
<li>Widgets</li>
<li>Thingamabobs</li>
<li>Doohickies</li>
</ul>
</li>
<li>Contact</li>
</ul>
for some reason i cannot get it working, any ideas what i can do to make my menu the same as the one on that website or alternatively, if that will be too complicated to get my menu to just change to a dropdown menu (select) on screen resize
You want to css media query
A media query consists of a media type and at least one expression that limits the style sheets' scope by using media features, such as width, height, and color. Added in CSS3, media queries let the presentation of content be tailored to a specific range of output devices without having to change the content itself.
More details
https://developer.mozilla.org/en/docs/CSS/Media_queries
http://www.w3.org/TR/css3-mediaqueries/
I have a basic menu bar that works on click. Everything works properly, but i noticed that if i make the browser window too small, the submenus open out of view and i can't scroll in the window to see them.
It is really easy to see what i am talking about if you view it on a mobile phone.
How would i auto add scroll bars to make sure that all my page's content can be seen?
Fiddle: http://jsfiddle.net/2SC5G/6/
SEARCH > RESULTS > LATEST SMOKE RESULTS is the longest selection in this demo. in order to see what i an talking about, resize the browser and put the right border right next to the "Search" menu item.
Thanks in advance.
HTML:
<!-- <LINK REL="SHORTCUT ICON" HREF="favicon.ico"> -->
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="includes/tp_menu.js"></script></script>
<link type="text/css" href="includes/tp_menu.css" rel="stylesheet" />
</head>
<body>
<div style="z-index:100;width:100%;position:fixed;top:0;left: 0;min-width:1000px;">
<div id="menuJQ">
<ul class="menuJQ">
<li class="parent"><span>Home</span></li>
<li><a class="parent" href="#"><span>Product View</span></a>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
</ul>
</div>
</li>
<li class="parent"><span>Request Tool</span></li>
<li><span>Search</span>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
<li><span>Internal DevTasks</span></li>
<li><span>Results</span>
<div id="submenu">
<ul>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a></li>
<li><a href="#" target='_blank'><span>Latest Smoke Results</span></a>
<div id="submenu">
<ul>
<li><span>DevTask Search</span></li>
<li><span>Active Machines</span></li>
<li><span>Integrity Query</span></li>
</ul>
</div>
</li>
</ul>
</div>
</li>
<li><span>Issues for Stability Team</span></li>
</ul>
</div>
</li>
</ul>
</div>
</div>
</body>
</html>
CSS:
/* menu::base */
.expand{
display:block;
}
.collapse{
display:none;
}
div#menuJQ {
height: 46px;
padding-left: 0px;
width:auto;
/*background: url(../includes/images/right2.png) repeat right 0;*/
background-color:black;
}
div#menuJQ ul {
margin: 0;
padding: 0;
list-style: none;
float: left;
}
div#menuJQ ul.menuJQ {
padding-right: 0px;
}
div#menuJQ li {
position: relative;
margin: 0;
padding: 0;
display: block;
float: left;
z-index: 9;
width: auto;
}
div#menuJQ ul ul li {
z-index: 9;
}
div#menuJQ li div {
list-style: none;
float: left;
position: absolute;
z-index: 11;
top: 39px;
left: -18px;
-left: 4px;
visibility: hidden;
transition-delay: 0.5s;
-moz-transition-delay: 0.5s; /* Firefox 4 */
-webkit-transition-delay: 0.5s; /* Safari and Chrome */
-o-transition-delay: 0.5s; /* Opera */
width: 180px;
margin: 0px 0 0 -4px;
padding: 0;
background: url(../includes/images/submenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/submenu-top.gif) no-repeat 0px 0;
}
div#menuJQ ul ul { /*submenu*/
display:none;
z-index: 12;
width: 180px;
padding: 0px 0px 12px 0px;
-padding: 0px 0px 3px 0px;
/*background: url(../includes/images/submenu-bottom.png) no-repeat 0px bottom;*/
background-color:black;
-background: #E4E4E2 none;
margin: 14px 0 0 0;
-margin: 5px 0 0 0;
}
div#menuJQ li > div {
visibility: visible;
}
div#menuJQ a {
position: relative;
z-index: 10;
height: 38px;
display: block;
float: left;
line-height: 38px;
text-decoration: none;
margin-top: 1px;
white-space: nowrap;
width: auto;
padding-right:5px;
text-align:center;
}
div#menuJQ span {
margin-top: 2px;
padding-left: 15px;
color: #fff;
font: normal 13px Tahoma;
background: none;
line-height: 38px;
display: block;
cursor: pointer;
background-repeat: no-repeat;
background-position: 95% 0;
text-align: center;
}
/* menu::level1 */
div#menuJQ a {
padding: 0 15px 0 0;
line-height: 38px;
height: 46px;
_margin-right: 1px;
background: none;
font-weight:bold;
}
div#menuJQ span {
font-weight:bold;
}
div#menuJQ a:hover{
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ li.current a,
div#menuJQ ul.menuJQ>li:hover>a {
background-image: url(../includes/images/selected-sub.png);
background-repeat: repeat-x;
background-position: right -1px;
-background: url(../includes/images/selected-sub.gif) repeat-x right -1px;
}
div#menuJQ a:hover span{
color: #ff9900;
}
div#menuJQ ul.menuJQ>li:hover>a span {
color: #ff9900;
}
div#menuJQ li {}
div#menuJQ li.last { background: none; }
/* menu::level2 */
div#menuJQ ul ul li {
background-image: url(../includes/images/sep-sub.png);
background-repeat: repeat-x;
background-position: left bottom;
margin: 0;
padding: 0;
}
div#menuJQ ul ul li:hover {
background-image: url(../includes/images/sub-item-hover.gif);
background-color: #717171;
background-repeat: repeat-x;
background-position: left top;
}
div#menuJQ ul ul a {
color: #ff9900;
height: auto;
float: none;
display: block;
line-height: 25px;
font-size: 13px;
z-index: -1;
padding: 6px 0 6px 0px;
white-space: normal;
width: 166px;
margin: 0 0px 0 13px;
background: none;
}
div#menuJQ ul ul a span {
color: #ff9900;
padding: 0 3px;
line-height: 25px;
font-size: 13px;
font-weight: normal;
margin:0;
}
div#menuJQ li.current ul a,
div#menuJQ li.current ul a span {
background: none;
}
div#menuJQ ul ul a:hover {
background: none;
color: #fff;
}
div#menuJQ ul ul a:hover span {
background: none;
color: #fff;
}
div#menuJQ ul ul a.parent {
background: url(../includes/images/submenu-pointer.png) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
margin-right: -1px;
}
div#menuJQ ul ul a.parent span {
padding-right: 26px;
}
div#menuJQ ul ul a.parent:hover {
background: url(../includes/images/submenu-pointer-hover.gif) no-repeat right top;
-background: url(../includes/images/submenu-pointer.gif) no-repeat right top;
}
div#menuJQ ul ul a.parent:hover span {
}
div#menuJQ ul ul span {
margin-top: 0;
text-align: left;
}
div#menuJQ ul ul li.last { background: none; }
div#menuJQ ul ul li {
width: 100%;
}
/* menu::level3 */
div#menuJQ ul ul div {
width: 180px;
padding: 0;
background: url(../includes/images/subsubmenu-top.png) no-repeat 0px 0;
-background: url(../includes/images/subsubmenu-top.gif) no-repeat 0px 0;
margin: -32px 0 0 198px !important;
margin: -32px 0 0 176px;
}
div#menuJQ ul ul ul {
padding: 11px 0px 9px 0px;
margin: 20px 0 0 0;
}
div#menuJQ ul ul div li {
position:relative;
top:-10px;
}
/* lava lamp */
div#menuJQ li.back {
background: url(../includes/images/selected-sub.png) no-repeat 0 0;
-background: url(../includes/images/selected-sub.gif) no-repeat 0 0;
width: 5px;
height: 46px;
z-index: 8;
position: absolute;
padding: 0;
margin: 0px 0 0 0;
}
div#menuJQ li.back .left {
padding:0;
width:auto;
background: url(../includes/images/selected-sub.png) repeat-x right 0;
-background: url(../includes/images/selected-sub.gif) repeat-x right 0;
height: 46px;
margin: 0 0 0 5px;
float: none;
position: relative;
top: 0;
left: 0;
visibility: visible;
}
JQuery:
$(document).ready(function(){
$('#menuJQ > ul li').click(function(e) {
e.preventDefault();
$('ul:first', this).show();
});
$('#menuJQ > ul li').mouseleave(function() {
$('ul', this).hide();
});
$('#submenu > ul li a').click(function(e) {
e.preventDefault();
window.location = (this).href;
// var test = (this).href;
// alert(test);
});
});
Put all of the CSS that you wrote into a media query:
#media only screen and (min-width: 900px) {
.expand{
display:block;
}
}
This will make it only work when the screen is wider than 900px. You can change that number of pixels.
Now write the CSS that you want only for mobile, outside the media query. Styles in the mdeia query will overwrite, but only when the condition is met.
If you want a widget for lists, you can visit my page:
http://instancia.net/jquery-plugin-mobile-list/
Shrink your browser width to see the widget. Zip file in page.
I'd like some help figuring out how to re-code the following fly-out menu function:
var site = function() {
this.navLi = $('#dnoa_nav li ul li').children('ul').hide().end();
this.init();
};
site.prototype = {
init : function() {
this.setMenu();
},
setMenu : function() {
$.each(this.navLi, function() {
if ( $(this).children('ul')[0] ) {
$(this)
.append('<span />')
.children('span')
.addClass('hasChildren')
}
});
this.navLi.hover(function() {
$(this).find('> ul').stop(true, true).slideDown('fast');
},
function() {
$(this).find('> ul').stop(true, true).hide();
});
}
}
new site();
You can see it in action here to see what it does right now. Once you see it in action, you'll see that I cannot get the parent LI's to remain "sticky" once you have chosen a child LI. For example: Job Aides > Contacts > Approved Brokers ... and what I mean by that is that the parent LI's (Job Aides and Contacts)do not remain in their hover state when the child LI is being moused over (Approved Brokers).
What I would like for the script to do is to keep the parent LI's in their hover state as a child LI is selected. Looking something like this:
Any ideas on what I can tweak in the function which I have pasted above? Thank you so much in advance!
UPDATE
Below is a copy of my CSS (and I hope that I haven't made a mess):
/* DNoA Nav menu */
.hasChildren {
position: absolute;
width: 11px; height: 24px;
background-image: url('/test/img/page/bkgd_navigation_subcell_hint.gif');
right : 0;
bottom: 0;
}
#dnoa_nav {
float: left;
margin: 0;
padding-top: 3px;
padding-left: 19px;
}
#dnoa_nav li a, #dnoa_nav li {
float: left;
}
#dnoa_nav li {
list-style: none;
position: relative;
font-family: "Lucida Grande","Lucida Sans Unicode",Arial,Verdana,sans-serif;
font-size: 14px;
font-weight: bold;
letter-spacing: 0.3px;
}
#dnoa_nav li a {
padding: 17px 16px;
text-decoration: none;
color: white;
}
#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
/* DNoA Nav submenu */
#dnoa_nav li ul {
display: none;
position: absolute;
left: 0;
top: 100%;
padding: 0;
margin: 0;
}
#dnoa_nav li:hover > ul {
display: block;
}
#dnoa_nav li ul li {
_display: inline; /* for IE6 */
}
#dnoa_nav li ul li a {
background: #eeeeee;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}
#dnoa_nav li ul li, #dnoa_nav li ul li a {
float: none;
background-image: none !important;
}
#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}
/* DNoA Nav subsubmenu */
#dnoa_nav li ul li ul {
display: none;
position: absolute;
left: 93%;
top: 7px;
padding: 0;
margin: 0;
border-top: 1px solid #CCCCCC;
z-index: 9999;
}
#dnoa_nav li ul li:hover > ul {
display: block;
}
#dnoa_nav li ul li ul li {
_display: inline; /* for IE6 */
}
#dnoa_nav li ul li ul li a {
background: #f8f8f8;
padding-top: 8px;
padding-bottom: 10px;
border-bottom: 1px solid #CCCCCC;
border-left: 1px solid #CCCCCC;
border-right: 1px solid #CCCCCC;
width: 175px;
font-weight: normal;
color: #005CA9;
display: block;
}
#dnoa_nav li ul li ul li, #dnoa_nav li ul li ul li a {
float: none;
background-image: none !important;
}
#dnoa_nav li ul li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif') !important;
background-repeat: repeat;
color: #FFFFFF;
}
Thanks,
Berklie
I finally got things how I wanted to work... based on the fact that Stack Overflow folks helped to point me in the correct direction: it was the CSS that needed tweaking, not the jQuery function. I ended up re-learning about CSS Selectors and how the use of the "greater than" sign ( ">" ) will allow the CSS to only directly affect a direct child LI of the parent UL... and not cascade down to every other child LI and UL (which was the problem that I was having when I styled the top-most UL and LI). So, these statements were edited to make it work:
#dnoa_nav li:hover a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
Was edited to:
#dnoa_nav li:hover > a {
background-image: url('/test/img/page/bkgd_navigation_cell.jpg');
background-repeat: repeat;
}
And this:
#dnoa_nav li ul li:hover a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}
Was edited to:
#dnoa_nav li ul li:hover > a {
background: #005ca9;
background-image: url('/test/img/page/bkgd_navigation_subcell_over.gif');
background-repeat: repeat;
color: #FFFFFF;
}
Thanks again for leading me on a path to learn about CSS Selectors,
Berklie