CSS position fixed causing overlapping of content - javascript

I'm making a static website, I fixed the navigation menu on the top
as a fixed header section.
The problem is arising that whatever content I add next to it is overlapping on the top of the menu.
Adding a relative position to the content acts in the same way.
Setting position as absolute is obviously the only thing that works but then I will have to add a whole lot of margins and that will make the site too unstable.
This is my CSS for the menu and i don't have really anything in the main CSS due this problem.
nav {
position: fixed;
top: 0;
background:none;
z-index:10000;
width:100%;
font-size:34px;
transition: all 0.5s;
}
nav.navScroll {
background: #013D5F;
font-size:20px;
transition: all 0.5s;
color: #fff;
}
img.logo {
float:left;
display:none;
transition: all 0.5s;
}
img.logoScroll {
display:inline;
width:50px;
padding:5px;
transition:all 0.5s;
}
div.menu {
text-align:center;
}
div.menuScroll {
float:right;
}
ul {
padding-left:0;
margin-left:0;
}
li.nav {
display:inline;
text-decoration:none;
padding-left:15px;
}
li.nav a {
list-style-type: none;
text-decoration:none;
color: white;
font-weight:400;
}
li.nav a:hover {
color: #FFD634;
transition: 1.2s;
}
.navScroll li.nav a {
color:#fff;
}
.navScroll li.nav a.selected {
color: #FFD634;
}

Jaromanda X correctly indicates that fixed position elements are taken out of flow. You must add a margin to the page body, or main container, equal to the height of your nav element. Your 'z-index:10000;' will prevent any scrolling elements from covering up your nav, provided nothing is given a higher z-index ;)

Related

CSS menu not pushing in

I have two push menu's: left and right. The right push menu is not working correctly when viewed on a mobile (issue 1 below). Additionally, neither menu's work in IE 11 (issue 2 below).
Mobile - On a mobile, when you open the left push menu and then
close it the right menu pushes into view and you cannot get rid of
it.
IE issue - In IE 11 the push menus do not appear, with the cause, as
far as I can tell, being: position:fixed; as applied to
menu-push-left and menu-push-right elements. I originally had
position:absolute; but this would cause the menu-push-right element
to just appear when opened in IE instead of "sliding" in. I have no
idea why the position:fixed; does not work in this instance of IE.
IE 7+, last I knew, supports position:fixed;
Could someone take a look at my code and tell me what I may have missed?
The JsFiddle is here: http://jsfiddle.net/totaleeyou/0w5w4t4s/8/
body {
color:#2c2c2c;
background-color:#ffffff;
padding:0;
margin:0;
font-size:1em;
font-family:Arial, Helvetica, sans-serif;
overflow-x:hidden;
}
body.has-active-menu-push-left,
body.has-active-menu-push-right {
overflow:hidden;
}
body, header.scroll, header ul.logo, #menu-push-left, #menu-push-right, button.menu-close i.fa-times-circle-o, .page-masking {
-webkit-transition:all 0.5s;
-moz-transition:all 0.5s;
-ms-transition:all 0.5s;
-o-transition:all 0.5s;
transition: all 0.5s;
}
body.has-active-menu-push-left, #menu-push-left {
-webkit-transform:translate(100%, 0);
-moz-transform:translate(100%, 0);
-ms-transform:translate(100%, 0);
-o-transform:translate(100%, 0);
transform:translate(100%, 0);
}
body.has-active-menu-push-right, #menu-push-right {
-webkit-transform:translate(-100%, 0);
-moz-transform:translate(-100%, 0);
-ms-transform:translate(-100%, 0);
-o-transform:translate(-100%, 0);
transform:translate(-100%, 0);
}
#media only screen and (min-width:780px) {
body.has-active-menu-push-left, #menu-push-left {
-webkit-transform:translate(500px, 0);
-moz-transform:translate(500px, 0);
-ms-transform:translate(500px, 0);
-o-transform:translate(500px, 0);
transform:translate(500px, 0);
}
body.has-active-menu-push-right, #menu-push-right {
-webkit-transform:translate(-500px, 0);
-moz-transform:translate(-500px, 0);
-ms-transform:translate(-500px, 0);
-o-transform:translate(-500px, 0);
transform:translate(-500px, 0);
}
}
.wrapper {
width:100%;
padding:0;
position:relative;
}
#media only screen and (min-width:780px) {
.wrapper {
width:1000px;
margin:0 auto;
padding: 0 5px;
}
}
#page-masking {
position:fixed;
}
.page-mask {
z-index:100;
top:0;
left:0;
width:0;
height:0;
background-color:#bec4a6;
}
.page-mask.is-active {
width:100%;
height:100vh;
opacity:.7;
-webkit-transition:opacity .5s;
transition:opacity .5s;
}
.close-container {
width:100%;
height:55px;
padding:5px;
position:relative;
}
button.menu-close {
color:#fdbc5d;
text-decoration:none;
font-size:3em;
position:absolute;
top:5px;
right:25px;
display:block;
border:none;
background:none;
}
#menu-push-left,
#menu-push-right {
position:fixed;
top:0;
width:100%;
height:100vh;
z-index:150;
overflow-x:hidden;
overflow-y:auto;
background-color:#0079c1;
}
#menu-push-left {
left:-200%;
}
#menu-push-right {
right:-200%;
}
#media only screen and (min-width:780px) {
#menu-push-left {
width:500px;
left:-1000px;
}
#menu-push-right {
width:500px;
right:-1000px;
}
}
I changed the position of your menues to 'fixed', and that seemed to do the trick =)
#menu-push-left, #menu-push-right {
position: fixed;
top: 0;
width: 100%;
height: 100vh;
z-index: 150;
overflow-x: hidden;
overflow-y: auto;
background-color: #0079c1;
}

url doesn't working on css hover overlayrs?

Hi guys i have this code : LINK here
image in this have a link should open it when click .
but when you hover the image the url doesn't working ! (why ?)
sorry for my bad english!
<div class="entry">
<a href="http://google.com">
<img src="http://t0.gstatic.com/images?q=tbn:ANd9GcS12iyyT_pG8r8V2IkiIsL7RHw-BLWjCvqQVgMzXLnLjt3KoCbf" alt="<?php the_title(); ?>" class="postimage" />
</a>
</div>
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
div.entry:hover:after {
opacity:1;
}
You can do this by adding pointer-events: none to the overlay (or .entry:after in your case). No javascript needed for that. Example:
div.entry:hover {
content:'Click on image for more information';
/* ... other css rules */
pointer-events: none;
}
Now your click will not be 'captured' but it 'bubbles up' to the underlying div.
But, as usual, IE is a troublemaker... This only works for IE11. For other IE versions you'd need javascript anyway...
Your overlay is appearing ABOVE the link, so no click is detected (you're clicking the overlay, not the link). You can change the overlay to be a part of the link instead. See: http://jsfiddle.net/U3QYY/3/
div.entry {
position: relative;
color:#000;
box-shadow:inset 1px 1px 40px 0 rgba(0,0,0,.45);
overflow:hidden;
cursor:pointer;
}
img.postimage {
height:220px;
width:220px;
}
a:before {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
a:hover:before {
opacity:1;
}
Most probably this part in your CSS is creating the problem.
div.entry:after {
content:'Click on image for more information';
text-align:center;
color:#fff;
position:absolute;
height:100%;
top:0; left:0;
background:rgba(0,0,0,0.8);
opacity:0;
transition: all 0.5s;
-webkit-transition: all 0.5s;
}
Notice when you hover the mouse over the image the div.entry:after properties are hiding the linked image behind hence disallowing you to open it.
So now I think you had got the problem and you can solve it yourself in your way.

Drop down menu hiding menus

I'm building a drop down menu for a project I'm working on, but I don't get it working entirely as is should. I want it to show the sub-menus when I hover the root-level menus, and then close again after a short delay when the menu or sub-menu is not hovered anymore. Most of it works; the sub-menus are showed when root-level items are hovered and it is hidden when I stop hovering the root-level item. The problem is that the sub-menus are also hidden when I move my cursor from the root-level item to a sub-menu item other than the first and hover that. This is obviously not good, so help would be appreciated.
I created a JSFiddle with the code which shows the issue more clearly.
So, here's my code:
menu.htm
<div id=m_wrapper>
<ul id=menu>
<li onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">Item 1
<div id=s0 onMouseOver="show_sub_menu('0')" onMouseOut="start_timer()">
<a href=#>Item 1.1</a>
<a href=#>Item 1.2</a>
<a href=#>Item 1.3</a>
</div>
</li>
</ul>
</div>
menu.css
#m_wrapper {
position:relative;
display:table;
}
#menu {
position:relative;
}
#menu li {
width:100px;
position:relative;
float:left;
list-style-type:none;
}
#menu div {
position:absolute;
visibility:hidden;
display:inherit;
width:100%;
z-index:30
}
#menu div a {
position:relative;
display:block;
z-index:35;
}
menu.js
var countdown = 300;
var timer = null;
var menu_item = null;
window.show_sub_menu = function(cath) {
if (menu_item) {
menu_item.style.visibility = 'hidden'; //Make sure to show one menu at a time
}
menu_item = window.document.getElementById("s" + cath);
menu_item.style.visibility = 'visible'; //Show menu
if (timer) {
window.clearTimeout(timer); //Reset timer, so menu is kept open
timer = null;
}
};
window.start_timer = function() {
timer = window.setTimeout(close_sub_menu, countdown);
};
window.close_sub_menu = function() {
menu_item.style.visibility = 'hidden';
};
you don't have to make it that complex.
ofcourse you can do same through javascript, but see how easy, readable and simple it is through jQuery.
See this DEMO
Just use following script
$('#menu li').hover(
function(){
$(this).stop().animate({height: '100px'},1000,function(){});
$(this).find('div').show(600);
}//gets called upon mousehover
,
function(){
$(this).stop().animate({height: '20px'},1000,function(){});
} //gets called upon mouseout
); //hover ends
and also, I don't know why you have written tonns of CSS. Just use these:
#menu
{
list-style:none;
}
#menu li
{
width:100px;
border:1px Solid #CCC;
text-align:Center;
cursor:pointer;
height:20px;
overflow:hidden;
}
#menu li div
{
border:1px Solid #CCC;
}
#s0
{
height:auto;
}
#s0 a
{
display:block;
}
There's plenty you can do through it, like selected dropdown item. selection through arrow key and what not. jQuery makes it simple for you.
first of all You should avoid <div> in <li> tags, because is not semantic.
Quite good is multi level menu build only with html and css styles.
HTML
<div id=m_wrapper>
<ul id=menu>
<li>Item 1
<ul>
<li><a href=#>Item 1.1</a></li>
<li><a href=#>Item 1.2</a></li>
<li><a href=#>Item 1.3</a></li>
</ul>
</li>
<li>Item 2</li>
</ul>
</div>
CSS STYLES
#m_wrapper, #menu, #menu li {
position:relative;
}
#m_wrapper {
display:table;
}
#menu li {
float:left;
width:100px;
list-style-type:none;
}
#menu li ul {
display: none;
}
#menu li:hover ul {
display: block;
margin: 0 10px;
padding: 0;
}
This can quite easily be achieved with HTML and CSS alone. Using CSS transitions we can make the menu fade when we hover off.
Example
I have also put this on JsFiddle
HTML
<nav>
<ul id="menu">
<li>
Home
<ul>
<li>Item1</li>
<li>Item2</li>
<li>Item3</li>
</ul>
</li>
<li>About</li>
<li>Contact</li>
</ul>
</nav>
CSS
#menu li
{
position: relative;
display: inline;
list-style: none;
padding-left: 15px;
}
#menu ul
{
margin: 0;
padding: 0;
list-style: none;
opacity: 0;
position: absolute;
top: 20px;
left: 5px;
// Transitions for our fade effect.
-webkit-transition: opacity 2s ease-in-out;
-moz-transition: opacity 2s ease-in-out;
-ms-transition: opacity 2s ease-in-out;
-o-transition: opacity 2s ease-in-out;
transition: opacity 2s ease-in-out;
}
#menu ul li
{
display: block;
}
#menu li:hover > ul
{
opacity: 1;
// This stops the transition from happening on hover.
-webkit-transition: none;
-moz-transition: none;
-ms-transition: none;
-o-transition: none;
transition: none;
}
A pure CSS drop down menu
http://jsfiddle.net/steelywing/GANeX/8/
.nav {
background-color: #def;
height: 20px;
}
.nav * {
transition: all 0.4s ease 0s;
-moz-transition: all 0.4s ease 0s;
-webkit-transition: all 0.4s ease 0s;
-o-transition: all 0.4s ease 0s;
}
li {
display: inline-block;
height: 20px;
}
.dropdown li {
display: block;
}
.dropdown ul {
visibility: hidden;
opacity: 0;
margin-top: -2px;
}
.dropdown:hover ul {
visibility: visible;
opacity: 1;
}
Remember that.. if You decide to implement the fade version, You should use crosbrowser opacity, like this:
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
filter: alpha(opacity=100);
-moz-opacity: 1;
-khtml-opacity: 1;
opacity: 1;

css and javascript to show figcaption of image when clicked

i am having some trouble configuring my javascript with my css so that when an image is clicked a little caption bar will appear with icons in it. Currently when i hover over the image the caption bar appears but i want to change this so that it will be usable for users on tablets where they have to touch and don't have the hover feature.
View page
<figure>
<img width="158" height="158" alt="Gravatar"
data-bind="attr:{src: GravatarUrl}" />
<figcaption>
<a title="Email" id="emailIcon" class="icon-envelope icon-white"
data-bind="attr:{'href':'mailto:' + Email()}"></a>
<a title="Profile" id="profileIcon" class="icon-user icon-white"></a>
</figcaption>
</figure>
CSS
figure, figcaption {
display: block;
}
figure {
position:relative;
float:left;
margin:20px;
width:158px;
height:158px;
border:1px solid #333;
overflow:hidden;
background: #fff;
padding: 1px;
}
figure figcaption {
position:absolute;
bottom:0;
left:0;
opacity: .75;
margin-bottom:-115px;
-webkit-transition: margin-bottom;
-webkit-transition-duration: 400ms;
-webkit-transition-timing-function: ease-out;
-moz-transition-property: margin-bottom;
-moz-transition-duration: 400ms;
-moz-transition-timing-function: ease-out;
-o-transition-property: margin-bottom;
-o-transition-duration: 400ms;
}
figure.open figcaption {
margin-bottom:0px;
}
figcaption {
width:160px;
height:25px;
background:#111;
color:#fff;
font-family: Arial, Helvetica, sans-serif;
}
Javascript Not sure if there is a way to do it with just css or not.
<script type="text/javascript">
(function ($) {
$.views.Roster.GetRoster('#url');
$('figure').on('click', function (event) {
$(event.currentTarget).toggleClass('open');
});
})(jQuery);
</script>
It's a great idea to just toggle a class and leave the visible elements to CSS.
$('figure').on('click', function (e) {
$(this).toggleClass('open');
});
In that case, style your figcaption the way you want it to look and then add:
figcaption { display: none; }
.open figcaption { display: block; }
This way, when the figcaption is hidden by default but when you click the target and the javascript adds the class "open" the figcaption will be visible. You certainly don't have to have it display block, it could be most anything other than "none."
If this code
figure:hover figcaption {
margin-bottom: 0px;
}
is showing the figcaption and you are putting open class to the figure when you want to show it, you can use:
figure:hover figcaption, figure.open figcaption {
margin-bottom: 0px;
}

I would like a vertical (feedback) button to have a slight animated slideout effect on mouse over

Here is an example of what I want to achieve - http://home.mcafee.com/default.aspx
I would like to know how to get the feedback tab/button to the right of the page to slightly open not completely slide out. And then on clicking, I would like to open a page (not a jquery form, but a page).
Any help?
Thanks in advance.
CSS3 transitions
#feedback {
transition:width 1s;
-moz-transition:width 1s; /* Firefox 4 */
-webkit-transition:width 1s; /* Safari and Chrome */
-o-transition:width 1s; /* Opera */
background:#ccc url(http://home.mcafee.com/OpinionLab/img/oo_tab_icon.gif) no-repeat 50% 90%;
position:fixed;
width:30px;
height:100px;
border:solid #666 1px;
right:-10px;
top:30%;
padding:0px 5px 5px 0px;
}
#feedback:hover
{
width:50px;
}
Try this http://jsfiddle.net/heera/q5Nu2/5 and you have to use a background image to show a vertical button.
CSS
#feedback{
background:#ccc url(http://home.mcafee.com/OpinionLab/img/oo_tab_icon.gif) no-repeat 50% 90%;
position:fixed;
width:30px;
height:100px;
border:solid #666 1px;
right:-10px;
top:30%;
padding:0px 5px 5px 0px;
}
#feedback img{width:100%;height:70px;border:solid black 1px;}​
HTML
​
JS
$('a#feedback').hover(function(e){
$(this).animate({'right':'-1px'}, 500);
},
function(e){
$(this).animate({'right':'-10px'}, 500);
});​

Categories