I have found this awesome menu on codepen. Now I want to use it, but my problem is that I want to place it right-aligned on my website. Unfortunately this menu drops also right. But I want it to drop left. So how could I solve this problem. (Change the opening angle didn't work?)
Thanks for your help.
http://codepen.io/lbebber/pen/pvwZJp
$opening-angle:$pi*2;
change transform property at .menu-open:checked~.menu-item selector
from transform:translate3d(110px*$i,0,0); to transform:translate3d(-110px*$i,0,0);
And change left property to right in .menu class
Updated .menu
.menu{
#extend %goo;
$width:650px;
$height:150px;
position:absolute;
right:50%; /*Changed*/
margin-left:-80px;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:right; /*Changed*/
}
Codepen
Related
I am implementing a close button on an element containing text with CSS. The close button is generated content from a pseudo element with content:'X';. I need the cursor to become a pointer on that "X" so I used :
cursor:pointer;
It works fine in Chrome and Firefox but it doesn't seem to work in Internet Explorer (testing on IE11 windows 7).
DEMO (test in IE)
I also tried with cursor:hand; but it doesn't solve the issue. How can I make the cursor a pointer while hovering the "X" but not on the text of the div?
Relevant code :
div{
font-size:2em;
position:relative;
display:inline-block;
}
div::before{
content:'X';
cursor:pointer;
display:block;
text-align:right;
}
<div>some text</div>
--EDIT--
I am aware that making a child or sibling in the markup and applying cursor:pointer; to it will work but I would like to minimize markup and use a pseudo element for the close button as it has no semantic value.
I'm really late to the game, but I just now figured out a solution to this problem.
This solution allows a pointer on the child element, while retaining a default cursor on the parent element.
(See the accepted answer here for a solution that doesn't include keeping the parent element's cursor default: cursor: pointer doesn't work on :after element?)
First of all, for this hacky solution, you have to give up the ability to interact with the parent element using the mouse.
Set the parent element to cursor: pointer.
Then, setting the parent element to pointer-events: none will allow you to "click/hover through" the parent element.
Then, for the pseudo element, just re-enable pointer events with pointer-events: auto.
Voila!
div{
font-size:2em;
position:relative;
display:inline-block;
/* remove ability to interact with parent element */
pointer-events: none;
/* apply pointer cursor to parent element */
cursor:pointer;
/* make it more obvious which is child and which parent for example*/
background: darkred;
}
div::before{
content:'X';
display:block;
text-align:right;
/* restore ability to interact with child element */
pointer-events: auto;
/* make it more obvious which is child and which parent for example*/
width: 30px;
text-align: center;
background: white;
}
<div>some text</div>
I believe that it's not working in pseudo elements in IE,
What I'm use to do is add cursor: ponter to main element.
If you need to add cursor: pointer to pseudo element only, than only way is to add child element
like:
<div><span></span>some text</div>
div{
font-size:2em;
position:relative;
display:inline-block;
}
div > span{
cursor:pointer;
}
div > span::before{
content:'X';
display:block;
text-align:right;
}
But than is no point to using pseudo class...
demo
HTML:
<div>
<div id="closebutton">
X
</div>
some text
</div>
css:
div{
font-size:2em;
position:relative;
display:inline-block;
}
div#closebutton{
cursor:pointer;
display:block;
text-align:right;
}
DEMO
demo
div{
font-size:2em;
position:relative;
display:inline-block;
border:1px solid #000;
margin:20px;
padding:20px;
}
div:after{
cursor:pointer;
display:block;
position:absolute;
height:20px;
width:20px;
top:-10px;
right:-10px;
content:'X';
font-size:15px;
}
<div>
some text
</div>
In order to make IE 7,8,9,10 behave like regular browsers that can deal with pseudo selectors, I always use IE7.js, a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues related to Internet Explorer. An alternative would be modernizr.js which is a good implementation to get pseudo selectors working with IE. I hope, that helps.
I am creating image which has a link on top with. Image has been set as relative, and the link as absolute on the bottom of the image. Basically it is a link on top of the image with absolute position and fixed widh and height. On hover, background of the link changes it's color. The problem occurs whenever I click on the link: it goes top of the image (on Opera and IE it stays there). Images as examples:In the picture below is a normal state of image with link (on hover background's transparency changes).
In this picture below is a state of a:active of the link.
It stays as absolute element, but changes it position. I have tried applying for a:active these options: copy everything from normal and hover states, position:static;, even tried to place a margin-top with a size that would be required to stay in bottom - no luck.
Here is the css code of it:
.image-with-link {width:300px; height:135px; position:relative; float:left; overflow:hidden;}
.image-with-link a {width:280px; height:18px; position:absolute; bottom:20px; left:0; padding:5px 10px; color:#fff; text-align:left; background: rgba(0,0,0,0.3); overflow:hidden;}
.image-with-link a:hover {background: rgba(0,0,0,0.5);}
(link is no longer needed).
You have conflicting CSS on lines 79 and 194 of custom.css that is overriding the absolute positioning:
You are declaring:
a:active, a:focus {
position:relative;
top:1px;
}
and on line 194:
.kategorijos .vienas a:active {
position:static;
}
Both of these are causing the problem. You want the item to keep position:absolute on :active.
This is your problem:
a:active,
a:focus{
/* Give clicked links a depressed effect. */
position:relative;
top:1px;
}
You overwrite position, but not top in following selector: .kategorijos .vienas a. You should add top: initial for fix.
I assume that position: static is by design here:
.kategorijos .vienas a:active {position:static;background: url('../images/arrow.png') 270px 4px no-repeat rgba(0,0,0,0.5);}
This moves link below image.
Try this, I guess this will work :)
a:active, a:focus {
position: relative;
top: 1px;
}
.kategorijos .vienas a:active {
position: static;
}
I have a vertical CSS menu but there is a gap to the left and above and i cannot work out where to remove it - my menu CSS is below and i have created a fiddle with my full code:
#vertical_menu {
float:left;
}
#vertical_menu > ul > li {
display:inline-block;
width:140px;
}
#vertical_menu > li {
display:inline-block;
list-style:none;
margin-left:-20px;
}
#vertical_menu li a {
display:block;
padding-bottom:10px;
margin-top:15px;
border-bottom:4px solid #000000;
color: #000000;
text-decoration:none;
}
#vertical_menu li a:hover {
border-color:#666666;
color:#666666
}
any ideas?
http://jsfiddle.net/Dfw9f/1/
i think what you are looking for is a reset CSS, kindly check CSS Tools: Reset CSS
The goal of a reset stylesheet is to reduce browser inconsistencies in
things like default line heights, margins and font sizes of headings
for quick solution just add this to your CSS
ul,tr,hr{margin:0;padding:0;}
I think adding this to your code will solve your problem:
ul
{
padding:0px;
margin:0px;
}
Hope this helped.
UPDATE
I think the gap is not because of an issue with margin or padding, but because of an empty row in your table. You can see this by giving the table a border, like <table border="1"> (jsfiddle).
I see that you included the last row of the table to have a line between the table and the menu. You can accomplish this simply by deleting the last row of the table (which is messing your layout) and add a border-bottom to the table, like <table border="0" style="border-bottom:1px solid gray;">
JSFIDDLE - here is an updated version, with the line and correctly laid out menu.
Hope this helped.
I have a list of thumbnails with links and images, so when the user hover an li element, it's height becomes 100%, but the problem it works wrong in Chrome for some odd reason. I don't understand why in Chrome the hovered li width doesn't adjust to its "new" size.
(Note: this is a simplified version of my problem)
Also, this problem occurs only on :hover. but not, lets say, with :nth-child
Playground link
Update: problem continues... See my solution in the answers, BUT the problem continues..I've zoom in with the mouse and you will see it happening..note that number of images can be huge.
Update 2:
Force a redraw every mousehweel event fires...
thumbs.hide().show(0);
My solution: Solution playground
The idea is to trick Chrome to re-calculate the width, by giving the image a new height that is almost the same on the li:hover state. BUT this isn't enough for Chrome. transitions must also be applied on the img. This is all voodoo coding, but this is the least-ugly solution I could come up with:
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%; }
li{ display:inline-block; vertical-align:middle; height:60%; -webkit-transition:.2s; transition:.2s; }
li:hover{ height:100%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ height:96%; -webkit-transition:.2s; transition:.2s; }
li:hover a img{ min-height:96%; }
I am new here and I am not sure if this is a good practice but I will post my observation and not a precise solution:
The same problem appears on Opera.
This seemed strange to me - when li:hover a img{ border:1px solid black; } or any similar css code that is not supposed to make any change to the current situation is added it all starts to behave very strange. ex - http://jsbin.com/operib/43/edit
And here it is the solution I do not find elegant, just a quick fix:
http://jsbin.com/operib/39/edit
EDIT: After testing #Carol McKay's result I realized that the transition is making the whole mess. The next link (node 58) is node 43 linked above (which is basically node 1 just added border to the image on hover) with removed transition and it works just fine http://jsbin.com/operib/58/edit.
It seems that any css rule should be added on hover so the <img/> dimensions are recalculated.
Apply transition to the image instead.
css
ul{ list-style:none; display:inline-block; height:80px; white-space:pre; width:100%;
}
li{ display:inline-block; vertical-align:middle; height:60%; }
li a{ height:100%; padding:0 2px; display:block; }
li a img{ display:inline-block; vertical-align:middle; height:96%; transition:0.15s; - webkit-transition:0.15s; }
li:hover{ height:100%; }
li:hover a img{ height:100%; opacity:1; }
http://jsbin.com/operib/83/edit
I am making a tabbed navigation menu via jQuery in my website. All the individual tabs have the class navBarLink and here's the CSS pertaining to it:
.navBarLink:link,.navBarLink:visited
{
display:block;
height:27px;
width:120px;
color:#FFF;
background-color:#06C;
text-align:center;
padding:4px;
text-decoration:none;
border:0;
margin:2px 2px 0 2px;
}
.navBarLink:hover,.navBarLink:active
{
background-color:#FFF;
color:#06C;
border-bottom-style:solid;
border-bottom-color:#FFFFFF;
border-bottom-width:1px;
}
The problem is that the background color changes when I click on a tab but doesn't change when I hover on a tab. Basically my hover and my click don't work simultaneously. Any idea why this is happening?
http://jsfiddle.net/UnFhQ/
This works. (I removed the :link from the first css code, just so I could see the div's background color...) But click this and let us know what about the code doesn't work.
Thanks