There is probably something really obvious I'm missing but I can't seem to center this template menu I found. By center I mean center aligned within the screen. It's normally margin: 0px auto; and display: block; but I've had no luck.
Please see the jsfiddle link. If it doesn't display properly, drag the 'Results' tab to the left.
Many thanks
https://jsfiddle.net/dtb08ng1/
<body>
<div id='cssmenu'>
<ul>
<li class="active">Home</li>
<li class='has-sub'>Products
<ul>
<li>.com</li>
<li>8</li>
<li>Lion</li>
<li>News</li>
</ul>
</li>
<li>Events</li>
<li>About Us</li>
</ul>
</div>
</body>
</html>
Try to change:
#cssmenu {
width: 100%;
text-align: center;
}
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
display:inline-block
}
Hope this will help you:
(function($) {
$.fn.menumaker = function(options) {
var cssmenu = $(this), settings = $.extend({
title: "Menu",
format: "dropdown",
sticky: false
}, options);
return this.each(function() {
cssmenu.prepend('<div id="menu-button">' + settings.title + '</div>');
$(this).find("#menu-button").on('click', function(){
$(this).toggleClass('menu-opened');
var mainmenu = $(this).next('ul');
if (mainmenu.hasClass('open')) {
mainmenu.hide().removeClass('open');
}
else {
mainmenu.show().addClass('open');
if (settings.format === "dropdown") {
mainmenu.find('ul').show();
}
}
});
cssmenu.find('li ul').parent().addClass('has-sub');
multiTg = function() {
cssmenu.find(".has-sub").prepend('<span class="submenu-button"></span>');
cssmenu.find('.submenu-button').on('click', function() {
$(this).toggleClass('submenu-opened');
if ($(this).siblings('ul').hasClass('open')) {
$(this).siblings('ul').removeClass('open').hide();
}
else {
$(this).siblings('ul').addClass('open').show();
}
});
};
if (settings.format === 'multitoggle') multiTg();
else cssmenu.addClass('dropdown');
if (settings.sticky === true) cssmenu.css('position', 'fixed');
resizeFix = function() {
if ($( window ).width() > 768) {
cssmenu.find('ul').show();
}
if ($(window).width() <= 768) {
cssmenu.find('ul').hide().removeClass('open');
}
};
resizeFix();
return $(window).on('resize', resizeFix);
});
};
})(jQuery);
(function($){
$(document).ready(function(){
$(document).ready(function() {
$("#cssmenu").menumaker({
title: "Menu",
format: "multitoggle"
});
$("#cssmenu").prepend("<div id='menu-line'></div>");
var foundActive = false, activeElement, linePosition = 0, menuLine = $("#cssmenu #menu-line"), lineWidth, defaultPosition, defaultWidth;
$("#cssmenu > ul > li").each(function() {
if ($(this).hasClass('active')) {
activeElement = $(this);
foundActive = true;
}
});
if (foundActive === false) {
activeElement = $("#cssmenu > ul > li").first();
}
defaultWidth = lineWidth = activeElement.width();
defaultPosition = linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
$("#cssmenu > ul > li").hover(function() {
activeElement = $(this);
lineWidth = activeElement.width();
linePosition = activeElement.position().left;
menuLine.css("width", lineWidth);
menuLine.css("left", linePosition);
},
function() {
menuLine.css("left", defaultPosition);
menuLine.css("width", defaultWidth);
});
});
});
})(jQuery);
/*------------------ CSS Menu ------------------*/
#cssmenu,
#cssmenu ul,
#cssmenu ul li,
#cssmenu ul li a,
#cssmenu #menu-button {
margin: 0px auto;
padding: 0;
border: 0;
list-style: none;
line-height: 1;
display: inline-block;
position: relative;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
#cssmenu:after,
#cssmenu > ul:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;
}
#cssmenu #menu-button {
display: none;
}
#cssmenu {
width: auto;
margin: 0px auto;
font-family: arial, sans-serif;
line-height: 1;
background: #000000;
}
#menu-line {
position: absolute;
top: 0;
left: 0;
height: 3px;
background: #71b51e;
-webkit-transition: all 0.25s ease-out;
-moz-transition: all 0.25s ease-out;
-ms-transition: all 0.25s ease-out;
-o-transition: all 0.25s ease-out;
transition: all 0.25s ease-out;
margin: 0px auto;
}
#cssmenu > ul > li {
float: left;
}
#cssmenu.align-center > ul {
font-size: 0;
text-align: center;
}
#cssmenu.align-center > ul > li {
display: inline-block;
float: none;
}
#cssmenu.align-center ul ul {
text-align: left;
}
#cssmenu.align-right > ul > li {
float: right;
}
#cssmenu.align-right ul ul {
text-align: right;
}
#cssmenu > ul > li > a {
padding: 20px;
font-size: 12px;
text-decoration: none;
text-transform: uppercase;
color: #FFFFFF;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu > ul > li:hover > a,
#cssmenu > ul > li.active > a {
color: #71b51e;
}
#cssmenu > ul > li.has-sub > a {
padding-right: 25px;
}
#cssmenu > ul > li.has-sub > a::after {
position: absolute;
top: 21px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #000000;
border-right: 1px solid #000000;
content: "";
-webkit-transform: rotate(45deg);
-moz-transform: rotate(45deg);
-ms-transform: rotate(45deg);
-o-transform: rotate(45deg);
transform: rotate(45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu > ul > li.has-sub:hover > a::after {
border-color: #71b51e;
}
#cssmenu ul ul {
position: absolute;
left: -9999px;
}
#cssmenu li:hover > ul {
left: auto;
}
#cssmenu.align-right li:hover > ul {
right: 0;
}
#cssmenu ul ul ul {
margin-left: 100%;
top: 0;
}
#cssmenu.align-right ul ul ul {
margin-left: 0;
margin-right: 100%;
}
#cssmenu ul ul li {
height: 0;
-webkit-transition: height .2s ease;
-moz-transition: height .2s ease;
-ms-transition: height .2s ease;
-o-transition: height .2s ease;
transition: height .2s ease;
}
#cssmenu ul li:hover > ul > li {
height: 32px;
}
#cssmenu ul ul li a {
padding: 10px 20px;
width: 160px;
font-size: 12px;
background: #000000;
text-decoration: none;
color: #dddddd;
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #71b51e;
}
#cssmenu ul ul li.has-sub > a::after {
position: absolute;
top: 13px;
right: 10px;
width: 4px;
height: 4px;
border-bottom: 1px solid #dddddd;
border-right: 1px solid #dddddd;
content: "";
-webkit-transform: rotate(-45deg);
-moz-transform: rotate(-45deg);
-ms-transform: rotate(-45deg);
-o-transform: rotate(-45deg);
transform: rotate(-45deg);
-webkit-transition: border-color 0.2s ease;
-moz-transition: border-color 0.2s ease;
-ms-transition: border-color 0.2s ease;
-o-transition: border-color 0.2s ease;
transition: border-color 0.2s ease;
}
#cssmenu.align-right ul ul li.has-sub > a::after {
right: auto;
left: 10px;
border-bottom: 0;
border-right: 0;
border-top: 1px solid #dddddd;
border-left: 1px solid #dddddd;
}
#cssmenu ul ul li.has-sub:hover > a::after {
border-color: #ffffff;
}
#media all and (max-width: 768px), only screen and (-webkit-min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min--moz-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (-o-min-device-pixel-ratio: 2/1) and (max-width: 1024px), only screen and (min-device-pixel-ratio: 2) and (max-width: 1024px), only screen and (min-resolution: 192dpi) and (max-width: 1024px), only screen and (min-resolution: 2dppx) and (max-width: 1024px) {
#cssmenu {
width: 100%;
}
#cssmenu ul {
width: 100%;
display: none;
margin : 0px auto;
}
#cssmenu.align-center > ul,
#cssmenu.align-right ul ul {
text-align: left;
}
#cssmenu ul li,
#cssmenu ul ul li,
#cssmenu ul li:hover > ul > li {
width: 100%;
height: auto;
border-top: 1px solid rgba(120, 120, 120, 0.15);
}
#cssmenu ul li a,
#cssmenu ul ul li a {
width: 100%;
}
#cssmenu > ul > li,
#cssmenu.align-center > ul > li,
#cssmenu.align-right > ul > li {
float: none;
display: block;
}
#cssmenu ul ul li a {
padding: 20px 20px 20px 30px;
font-size: 12px;
color: #000000;
background: none;
}
#cssmenu ul ul li:hover > a,
#cssmenu ul ul li a:hover {
color: #000000;
}
#cssmenu ul ul ul li a {
padding-left: 40px;
}
#cssmenu ul ul,
#cssmenu ul ul ul {
position: relative;
left: 0;
right: auto;
width: 100%;
margin: 0;
}
#cssmenu > ul > li.has-sub > a::after,
#cssmenu ul ul li.has-sub > a::after {
display: none;
}
#menu-line {
display: none;
}
#cssmenu #menu-button {
display: block;
padding: 20px;
color: #000000;
cursor: pointer;
font-size: 12px;
text-transform: uppercase;
}
#cssmenu #menu-button::after {
content: '';
position: absolute;
top: 20px;
right: 20px;
display: block;
width: 15px;
height: 2px;
background: #000000;
}
#cssmenu #menu-button::before {
content: '';
position: absolute;
top: 25px;
right: 20px;
display: block;
width: 15px;
height: 3px;
border-top: 2px solid #000000;
border-bottom: 2px solid #000000;
}
#cssmenu .submenu-button {
position: absolute;
z-index: 10;
right: 0;
top: 0;
display: block;
border-left: 1px solid rgba(120, 120, 120, 0.15);
height: 52px;
width: 52px;
cursor: pointer;
}
#cssmenu .submenu-button::after {
content: '';
position: absolute;
top: 21px;
left: 26px;
display: block;
width: 1px;
height: 11px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button::before {
content: '';
position: absolute;
left: 21px;
top: 26px;
display: block;
width: 11px;
height: 1px;
background: #000000;
z-index: 99;
}
#cssmenu .submenu-button.submenu-opened:after {
display: none;
}
}
#cssmenu {
width: 100%;
text-align: center;
}
<body>
<div id='cssmenu'>
<ul>
<li class="active">Home</li>
<li class='has-sub'>Products
<ul>
<li>.com</li>
<li>8</li>
<li>Lion</li>
<li>News</li>
</ul>
</li>
<li>Events</li>
<li>About Us</li>
</ul>
</div>
</body>
Just change in css file below code:
CSS
#cssmenu {
width: auto;
margin: 0px auto;
font-family: arial, sans-serif;
line-height: 1;
background: #fff;
text-align:center;
}
I would wrap the div#cssmenu element in a div#container. That way you can make the menu display: inline-block; and use text-align: center; on the container div.
See updated JSfiddle at https://jsfiddle.net/dtb08ng1/2/.
Update
The new CSS I added to get this to work is as follows:
#container {
text-align: center;
width: 100%;
background: #000000;
}
#cssmenu {
display: inline-block;
…
}
The only HTML change I made was to wrap the div#cssmenu as follows:
…
<div id="container">
<div id="cssmenu">
…
</div>
</div>
…
Most Simple Pure CSS Menu
body {
margin: 0px;
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
width: 100%;
text-align: center;
display: inline-block;
margin: 0px;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
background: #000;
color: #fff;
}
ul li {
font: 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 20px 20px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
color: #71b51e;
}
ul li ul {
padding: 0;
position: absolute;
left: 0;
top: 57px;
width: 140px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #000;
display: block;
color: #fff;
text-align: left;
padding: 5px 15px;
height: 25px;
}
ul li ul li:hover {
background: #111;
color: #71b51e;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<ul>
<li>HOME</li>
<li>PRODUCTS</li>
<li>
EVENTS
<ul>
<li>.com</li>
<li>8</li>
<li>Lion</li>
<li>News</li>
</ul>
</li>
<li>ABOUT US</li>
</ul>
DEMO
I have a problem with my parallax function here
The function itself works great, but whenever I scroll down to where a parallax image is (for example on one of the product pages), and at the same time hover over the top menu products, it makes the images disappear. From what I know, it only occurs in Chrome.
I know for sure it's the parallax function, because if I delete the parallax mirror div, it all works great again.
Have anyone experienced the same thing, or has a clue of why it's doing like this, please let me know!
EDIT: Hi, Here's a jsfiddle! http://jsfiddle.net/fxL7yq35/7/
/*!
* parallax.js v1.3.1 (http://pixelcog.github.io/parallax.js/)
* #copyright 2015 PixelCog, Inc.
* #license MIT (https://github.com/pixelcog/parallax.js/blob/master/LICENSE)
*/
!function(t,i,e,s){function o(i,e){var h=this;"object"==typeof e&&(delete e.refresh,delete e.render,t.extend(this,e)),this.$element=t(i),!this.imageSrc&&this.$element.is("img")&&(this.imageSrc=this.$element.attr("src"));var r=(this.position+"").toLowerCase().match(/\S+/g)||[];return r.length<1&&r.push("center"),1==r.length&&r.push(r[0]),("top"==r[0]||"bottom"==r[0]||"left"==r[1]||"right"==r[1])&&(r=[r[1],r[0]]),this.positionX!=s&&(r[0]=this.positionX.toLowerCase()),this.positionY!=s&&(r[1]=this.positionY.toLowerCase()),h.positionX=r[0],h.positionY=r[1],"left"!=this.positionX&&"right"!=this.positionX&&(this.positionX=isNaN(parseInt(this.positionX))?"center":parseInt(this.positionX)),"top"!=this.positionY&&"bottom"!=this.positionY&&(this.positionY=isNaN(parseInt(this.positionY))?"center":parseInt(this.positionY)),this.position=this.positionX+(isNaN(this.positionX)?"":"px")+" "+this.positionY+(isNaN(this.positionY)?"":"px"),navigator.userAgent.match(/(iPod|iPhone|iPad)/)?(this.iosFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this):navigator.userAgent.match(/(Android)/)?(this.androidFix&&!this.$element.is("img")&&this.$element.css({backgroundImage:"url("+this.imageSrc+")",backgroundSize:"cover",backgroundPosition:this.position}),this):(this.$mirror=t("<div />").prependTo("body"),this.$slider=t("<img />").prependTo(this.$mirror),this.$mirror.addClass("parallax-mirror").css({visibility:"hidden",zIndex:this.zIndex,position:"fixed",top:0,left:0,overflow:"hidden"}),this.$slider.addClass("parallax-slider").one("load",function(){h.naturalHeight&&h.naturalWidth||(h.naturalHeight=this.naturalHeight||this.height||1,h.naturalWidth=this.naturalWidth||this.width||1),h.aspectRatio=h.naturalWidth/h.naturalHeight,o.isSetup||o.setup(),o.sliders.push(h),o.isFresh=!1,o.requestRender()}),this.$slider[0].src=this.imageSrc,void((this.naturalHeight&&this.naturalWidth||this.$slider[0].complete)&&this.$slider.trigger("load")))}function h(s){return this.each(function(){var h=t(this),r="object"==typeof s&&s;this==i||this==e||h.is("body")?o.configure(r):h.data("px.parallax")||(r=t.extend({},h.data(),r),h.data("px.parallax",new o(this,r))),"string"==typeof s&&o[s]()})}!function(){for(var t=0,e=["ms","moz","webkit","o"],s=0;s<e.length&&!i.requestAnimationFrame;++s)i.requestAnimationFrame=i[e[s]+"RequestAnimationFrame"],i.cancelAnimationFrame=i[e[s]+"CancelAnimationFrame"]||i[e[s]+"CancelRequestAnimationFrame"];i.requestAnimationFrame||(i.requestAnimationFrame=function(e){var s=(new Date).getTime(),o=Math.max(0,16-(s-t)),h=i.setTimeout(function(){e(s+o)},o);return t=s+o,h}),i.cancelAnimationFrame||(i.cancelAnimationFrame=function(t){clearTimeout(t)})}(),t.extend(o.prototype,{speed:.2,bleed:0,zIndex:-99999,iosFix:!0,androidFix:!0,position:"center",overScrollFix:!1,refresh:function(){this.boxWidth=this.$element.outerWidth(),this.boxHeight=this.$element.outerHeight()+2*this.bleed,this.boxOffsetTop=this.$element.offset().top-this.bleed,this.boxOffsetLeft=this.$element.offset().left,this.boxOffsetBottom=this.boxOffsetTop+this.boxHeight;var t=o.winHeight,i=o.docHeight,e=Math.min(this.boxOffsetTop,i-t),s=Math.max(this.boxOffsetTop+this.boxHeight-t,0),h=this.boxHeight+(e-s)*(1-this.speed)|0,r=(this.boxOffsetTop-e)*(1-this.speed)|0;if(h*this.aspectRatio>=this.boxWidth){this.imageWidth=h*this.aspectRatio|0,this.imageHeight=h,this.offsetBaseTop=r;var n=this.imageWidth-this.boxWidth;this.offsetLeft="left"==this.positionX?0:"right"==this.positionX?-n:isNaN(this.positionX)?-n/2|0:Math.max(this.positionX,-n)}else{this.imageWidth=this.boxWidth,this.imageHeight=this.boxWidth/this.aspectRatio|0,this.offsetLeft=0;var n=this.imageHeight-h;this.offsetBaseTop="top"==this.positionY?r:"bottom"==this.positionY?r-n:isNaN(this.positionY)?r-n/2|0:r+Math.max(this.positionY,-n)}},render:function(){var t=o.scrollTop,i=o.scrollLeft,e=this.overScrollFix?o.overScroll:0,s=t+o.winHeight;this.visibility=this.boxOffsetBottom>t&&this.boxOffsetTop<s?"visible":"visible",this.mirrorTop=this.boxOffsetTop-t,this.mirrorLeft=this.boxOffsetLeft-i,this.offsetTop=this.offsetBaseTop-this.mirrorTop*(1-this.speed),this.$mirror.css({transform:"translate3d(0px, 0px, 0px)",visibility:this.visibility,top:this.mirrorTop-e,left:this.mirrorLeft,height:this.boxHeight,width:this.boxWidth}),this.$slider.css({transform:"translate3d(0px, 0px, 0px)",position:"absolute",top:this.offsetTop,left:this.offsetLeft,height:this.imageHeight,width:this.imageWidth,maxWidth:"none"})}}),t.extend(o,{scrollTop:0,scrollLeft:0,winHeight:0,winWidth:0,docHeight:1<<30,docWidth:1<<30,sliders:[],isReady:!1,isFresh:!1,isBusy:!1,setup:function(){if(!this.isReady){var s=t(e),h=t(i);h.on("scroll.px.parallax load.px.parallax",function(){var t=o.docHeight-o.winHeight,i=o.docWidth-o.winWidth;o.scrollTop=Math.max(0,Math.min(t,h.scrollTop())),o.scrollLeft=Math.max(0,Math.min(i,h.scrollLeft())),o.overScroll=Math.max(h.scrollTop()-t,Math.min(h.scrollTop(),0)),o.requestRender()}).on("resize.px.parallax load.px.parallax",function(){o.winHeight=h.height(),o.winWidth=h.width(),o.docHeight=s.height(),o.docWidth=s.width(),o.isFresh=!1,o.requestRender()}),this.isReady=!0}},configure:function(i){"object"==typeof i&&(delete i.refresh,delete i.render,t.extend(this.prototype,i))},refresh:function(){t.each(this.sliders,function(){this.refresh()}),this.isFresh=!0},render:function(){this.isFresh||this.refresh(),t.each(this.sliders,function(){this.render()})},requestRender:function(){var t=this;this.isBusy||(this.isBusy=!0,i.requestAnimationFrame(function(){t.render(),t.isBusy=!1}))}});var r=t.fn.parallax;t.fn.parallax=h,t.fn.parallax.Constructor=o,t.fn.parallax.noConflict=function(){return t.fn.parallax=r,this},t(e).on("ready.px.parallax.data-api",function(){t('[data-parallax="scroll"]').parallax()})}(jQuery,window,document);
/* P A R A L L A X */
.parallax-fullwidth {
height: 550px;
background: transparent;
position:relative;
overflow:hidden !important;
}
.parallax-fullwidth .two-column-left,
.parallax-fullwidth .two-column-right {
padding: 50px 10%;
width: 35% !important;
text-align: center;
min-width: 300px}
.parallax-mirror {
/*overflow: hidden !important;*/
overflow: visible !important;}
/* MENU */
.sub-navigation {
clear: both;
margin: 0 auto;
background-color: #f1efeb;
padding: 0px 10%;
width: 80%;
z-index: 1;
position: relative;
padding-top:55px;
height: 60px;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.sub-holder,
.nav-holder {
text-align: left;
display:inline-table;
margin-left: 0px;
float: right;
width: 100%;
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.nav-menu li:hover > a,
.nav-menu li a:hover,
.nav-menu li:focus > a,
.nav-menu li a:focus,
.sub-menu li:hover > a,
.sub-menu li a:hover,
.sub-menu li:focus > a,
.sub-menu li a:focus {
// set animation
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;}
.sub-navigation .sub-menu li {
text-align: left;
min-width: 130px;
margin: 0px !important;
height: 50px;
padding: 3px 2px 7px;}
.main-navigation .nav-menu li {
text-align: center;
margin: 8px 0px 0px;
height: 45px;
padding: 10px 0px 3px;}
.main-navigation .nav-menu li.main-item {
padding: 10px 3px 3px;}
.sub-navigation .sub-menu li a {
font-size: 12px;}
.sub-navigation .sub-menu li a:hover {}
.sub-navigation .sub-menu li:hover {
background: #e3e1dc;}
.sub-navigation .navigation-link,
.main-navigation .navigation-link {
position: absolute;
bottom: 8px;
float: left;
line-height: 1.2em;
}
.sub-navigation .back,
.main-navigation .back {
-moz-transition-duration:.4s;
-o-transition-duration:.4s;
-webkit-transition-duration:.4s;
background-color:rgba(0, 0, 0, 0.5);
height:0;
width:100%;}
.sub-navigation:hover div.back,
.main-navigation:hover div.back {
height:250px;}
ul.sub-menu,
ul.nav-menu {
display:block;
float:left;
list-style:none;
margin:0;
width: 100% !important;
position:relative;}
ul.sub-menu li,
ul.nav-menu li {
float:right;
margin:0 5px 0 0;
line-height: normal !important;}
ul.nav-menu li {
font-size: 15px;
margin-top: 7px;}
ul.sub-menu li > a,
ul.nav-menu li > a {
-webkit-transition: all 0.7s ease;
-moz-transition: all 0.7s ease;
-o-transition: all 0.7s ease;
transition: all 0.7s ease;
display:table-cell;
vertical-align: bottom;
padding:0 6px;
text-decoration:none;
}
.active {
color:#a2a09c !important;}
ul.sub-menu li > a {
height: 50px;}
ul.sub-menu li a img,
ul.nav-menu li a img {
vertical-align: bottom !important;
bottom: 0px;
}
.subs {
left:0;
position:absolute;
top:60px;
width:100%;
font-size: 16px;
visibility: hidden;
opacity:0;
height: 0px;
text-align: left;
overflow: hidden;
transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
-webkit-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
-moz-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
-o-transition: height 0.5s ease 0s,visibility 0s 0.3s,opacity 0.3s;
}
.main-navigation .subs {
top: 55px;}
.sub-menu > li:hover > .subs,
.nav-menu > li:hover > .subs {
background: #e3e1dc;
visibility: visible;
opacity: 1;
height: 450px !important;
// set animation
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
}
.subs > .subs-content {
padding: 4% 8%;
opacity: 0;
transition: opacity 0.5s ease 0.2s;
-webkit-transition: opacity 0.5s ease 0.2s;
-moz-transition: opacity 0.5s ease 0.2s;
-o-transition: opacity 0.5s ease 0.2s;
}
.subs-content .icon-description {
margin-top: 10px !important;}
.icon-description {
margin-top: 30px;}
.icon-description h4 {
margin: 0px !important;}
.sub-menu > li:hover > .subs .subs-content,
.nav-menu > li:hover > .subs .subs-content {
opacity: 1;}
.subs > .subs-content > .subs-column {
float: left;
width: 49%;
text-align: center;
position: absolute;
bottom: 0px;
left: 0px;
top: 20px;}
.subs-column img {
width: 100%;
height: auto;
max-width: 470px}
.subs > .subs-content > .subs-column-right {
float: right;
width: 46%;}
.sub-menu li div.subs dl,
.nav-menu li div.subs dl {
-moz-transition-duration:.2s;
-o-transition-duration:.2s;
-webkit-transition-duration:.2s;
float:left;
margin:0 130px 0 0;
overflow:hidden;
padding:40px 0 5% 2%;
width:0;
}
.sub-menu dt,
.nav-menu dt {
color:#fc0;
font-family:arial, sans-serif;
font-size:12px;
font-weight:700;
height:20px;
line-height:20px;
margin:0;
padding:0 0 0 10px;
white-space:nowrap;
}
.sub-menu dd,
.nav-menu dd {
margin:0;
padding:0;
text-align:left;
}
.sub-menu dd a,
.nav-menu dd a {
background:transparent;
color:#fff;
height:20px;
padding:0 0 0 10px;
text-align:left;
white-space:nowrap;
width:80px;
}
.sub-menu dd a:hover,
.nav-menu dd a:hover {
color:#fc0;
}
.sub-menu li:hover div.subs dl,
.nav-menu li:hover div.subs dl {
-moz-transition-delay:0.2s;
-o-transition-delay:0.2s;
-webkit-transition-delay:0.2s;
margin-right:2%;
width:21%;
}
ul.sub-menu li:hover > a,
ul.sub-menu li > a:hover,
ul.nav-menu li:hover > a,
ul.nav-menu li:hover > a {
color: #a2a09c;
}
ul.sub-menu li:hover:after,
ul.nav-menu li:hover:after {
background: url(../images/sub_hover.png);
width: 33px;
height: 20px;}
.sub-menu li:hover div.subs,
.sub-menu li a:hover div.subs,
.nav-menu li:hover div.subs,
.nav-menu li a:hover div.subs {
width:100%;
}
.nav-menu .sub-item {
min-width: 10px !important;
margin-top: 0px !important;
padding: 4px 0px 6px !important;
opacity: 1;
visibility: visible;}
.nav-menu .sub-item a {
height: 46px;}
.nav-menu .sub-item:hover {
background: #e3e1dc;}
.js .nav-menu {
clip: rect(0 0 0 0);
max-height: 0;
position: absolute;
display: block;
zoom: 1;
}
.nav-menu.opened {
max-height: 9999px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<nav class="sub-navigation">
<div class="navigation-content">
<ul class="sub-menu slide">
<li><a href="/products/viktstart/"><img src="http://betavivo.se/wp-content/themes/betavivo/images/Betavivo_ViktStart_icon_small.png" class="img_left" /><span class="navigation-link">Betavivo <br />
<span class="viktstart-text">vikt>start</span></span></a>
<div class="subs">
<div class="subs-content">
<div class="subs-column">
<img src="http://betavivo.se/wp-content/themes/betavivo/images/Betavivo_ViktStart_icon.png" />
</div>
<div class="subs-column-right"><h2>Betavivo <br>
<span class="viktstart-text">vikt>start</span></h2>
<p>Betavivo vikt>start är ett kosttillskott med glukomannan som bidrar till viktminskning.</p>
Läs mer
<div class="clear"></div>
<div class="icon-description">
<img src="http://betavivo.se/wp-content/themes/betavivo/images/icon_weightloss.png" class="icon_left" />
<div style="overflow:hidden;">
<h4>Viktminskning</h4>
<small>Glukomannan bidrar till viktminskning i samband med intag av en energibegränsad kost.</small>
</div>
</div>
</div>
<div class="clear"></div>
</div>
</div>
</li>
</ul>
<div class="clear"></div>
</div>
</nav>
hej
<div class="parallax-fullwidth animatedParent" data-position="top" data-parallax="scroll" data-speed="0.5" data-bleed="10" data-image-src="http://betavivo.se/wp-content/uploads/2015/05/Viktstart.jpg" data-natural-width="2000" data-natural-height="1333" data-position="0px 0px"></div>
I've made this dropdown menu that I want to add some nice slide effects on. Since I'm new to programming I can't get it to work, and I've googled for hours. I've prepared A jsfiddle
[Here][1] (cause that's what I should've done, right?).
I would appreciate it so much if I got a little help.
Thank you!
[1]: http://jsfiddle.net/knickemackan/2r6FE/
I have updated the JS Fiddle
You need to add jquery file, and add a little code to the JS file as shown below.
$("#navMainWrap li, #navMainWrap li a").hover(function () {
$(this).find("ul").slideDown("slow");
}, function() {
$(this).find("ul").slideUp("slow");
});
Regards D.
If you do "display:block;"; the height of the element won't animate automatically.
( http://jsfiddle.net/2r6FE/11/ )
Update your CSS like this:
#body {
padding: 0;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
font-size: 17px;
background-color: #FFF;
}
#header_wrapper {
width: 100%;
height: 150px;
margin: 0 auto;
background-color: #FFF;
}
#logo_wrapper {
height: 150px;
margin-left: 10%;
width: 500px;
background-image: url(../img/logo.png);
}
#nav {
background-color: #FFF;
border: 1px solid #ccc;
}
#nav_wrapper {
width: 960px;
margin: 0 auto;
text-align: left;
font-family: Arial, Helvetica, sans-serif;
font-size: 20px;
font-weight: normal;
z-index: 998;
position: relative;
}
#nav ul {
list-style-type: none;
padding: 0;
margin: 0;
position: relative;
min-width: 200px;
z-index: 999;
}
#nav ul li {
display: inline-block;
z-index: 1000;
position: relative;
}
#nav ul li:hover {
background-color: #BFF2FF;
}
#nav ul li a, visited {
color: #999;
display: block;
padding: 15px;
text-decoration: none;
}
#nav ul li ul {
max-height:0;
-webkit-transition-property: max-height,opacity;
-moz-transition-property: max-height,opacity;
-ms-transition-property: max-height,opacity;
-o-transition-property: max-height,opacity;
transition-property: max-height,opacity;
-webkit-transition-duration: 0.3s,0,3s;
-moz-transition-duration: 0.3s,0,3s;
-ms-transition-duration: 0.3s,0,3s;
-o-transition-duration: 0.3s,0,3s;
transition-duration: 0.3s,0,3s;
-webkit-transition-timing-function: ease-in;
-moz-transition-timing-function: ease-in;
-ms-transition-timing-function: ease-in;
-o-transition-timing-function: ease-in;
transition-timing-function: ease-in;
-webkit-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-o-transition-delay: 0s;
transition-delay: 0s;
overflow:hidden;
}
#nav ul li:hover ul {
max-height:600px;
}
#nav ul ul {
display: block;
position: absolute;
background-color: #FFFFFF;
border: 5px solid #ddd;
border-top: 0;
margin-left: -5px;
}
#nav ul ul li {
display:block;
}
#nav ul ul li a:hover {
color: #FFF;
}
#uploadcont {
background-color: fff;
height: 200px;
width: 500px;
}
#contactcont {
background-color: #ffffff;
width: 500px;
}
.alleft {
text-align: left;
}
#uploadcont_in {
height: auto;
margin: 25px;
padding: 10px;
border: 10px solid #FFF;
}
#contactcont_in {
height: auto;
margin: 25px;
padding: 10px;
}
To get something like a slide effect, you could use the max-height property:
#nav ul li:hover ul {
max-height: 500px;
}
#nav ul ul {
display:inline-block;
max-height: 0;
position: absolute;
overflow:hidden;
background-color: #FFFFFF;
border: 5px solid #ddd;
border-top: 0;
margin-left: -5px;
-webkit-transition: all 0.5s ease-in;
-moz-transition: all 1s ease-in;
-ms-transition: all 1s ease-in;
-o-transition: all 1s ease-in;
transition: all 1s ease-in;
}
This way, the sub-menus will expand when you hover its menu-point until they reach their original size or the max-height-value.
You could also use the left property instead of max-height to create a horizontal slide-effect.
I'm hoping one of you nice people can help. I have a pure CSS drop down menu, as part of the design it needs to be slightly away from the main menu item, the problem is that because of this design there's a gap - and so as soon as the mouse moves away from the sub menu it disappears. I want it to hold their for a while longer so the user has more chance to click. Can anyone help?
I've set up a JS fiddle here.
<div id="menu" class="top">
<ul>
<li>home</li>
<li>about</li>
<li>portfolio
<ul>
<li>Overview</li>
<li>Page 1</li>
<li>Page 2</li>
</ul>
</li>
</div>
#menu{
position:absolute;
left:0;
zoom:1;
background-color:#010;
}
#menu ul{
position:relative;
border-top: dotted 1px #fff;
border-bottom: dotted 1px #fff;
padding:2px 0 2px 0;
float:right;
zoom:1;
list-style:none;
}
#menu ul li{
margin:0;
font:16px/16px 'Open Sans', sans-serif;
padding:0 5px 0 0;
display:inline;
position:relative;
zoom:1;
}
#menu ul li a{
color:#fff;
text-decoration:none;
}
#menu ul li a:hover{
text-decoration:underline;
}
#menu ul li.selected a{
color:#8dc63e;
}
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.8s;
-moz-transition: opacity 0.8s;
-ms-transition: opacity 0.8s;
-o-transition: opacity 0.8s;
-transition: opacity 0.8s;
}
#menu ul li ul li {
display: block;
border-bottom: 1px solid #fff;
color: #fff;
padding:10px;
}
#menu ul li ul li:hover { text-decoration:underline; }
#menu ul li.selected ul li a { color: #fff;}
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
#menu ul li ul:after{
content: '';
position: absolute;
border-style: solid;
border-width: 0 15px 15px;
border-color: #fff transparent;
display: block;
width: 0;
z-index: 1;
top: -15px;
left: 64px;
}
It seemed a bit of a mess, lots of duplication with display:none being set as well as opacity:0 and visibility:hidden. There are a few z-indexes in there as well. Not nice to maintain.
Really what you need is for the UL menu to be opacity 0, with a transition to fade it in over time, but not too quick, and then the hover state to be opacity 1.
So from fiddling with your fiddle...
#menu ul li ul {
border: 2px solid #fff;
border-radius:10px;
background-color: #8dc63e;
padding: 0;
position: absolute;
top: 45px;
right: -30px;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
opacity: 0;
-webkit-transiton: opacity 8s;
-moz-transition: opacity 8s;
-ms-transition: opacity 8s;
-o-transition: opacity 8s;
-transition: opacity 8s;
}
and
#menu ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:250;
}
This one works, http://jsfiddle.net/ydF3B/1/ although I set the transition to be 8s from 0.8s... you might want to dig through and remove all the unneccessary styles and see what is actually going on.
Have fun :)
EDIT Complete justification for my earlier comment about wanting to dig through it all, the fiddle above doesn't solve your issue as pointed out in the comments :) Instead a better approach is to make the area you are hovering over larger, so that when you pass over from the menu item onto the menu, there is no actual gap, even though there is a visual gap. I did this by increasing the padding: http://jsfiddle.net/ydF3B/2/