This question already has answers here:
CSS 3 slide-in from left transition
(6 answers)
Closed 8 years ago.
Please find this jsfiddle jsfiddle . When the screen size is less than 600px, the top menu bar is converted into responsive menu. When user hovers on "Menu" text (this text is used only for the demo), the menu appears. This works well on desktop and smartphones. Now I tried to implement slide right transition when user clicks on "Menu" text. I modified below css class
.nav ul:hover li{
display: block;
margin: 5px 0 0 0;
}
and add transition property. But it didn't work.
How do I make slide right responsive menu from css ???
This is not how i'd do it. You've to consider altering your HTML and CSS.
for example, the word menu is simply written in HTML, which is semantically incorrect and becomes a blocker while trying to animate the element, because you've to keep the text visible and deal with the rest of <li>, meaning this prevents you from being able to easily animate the <ul> altogether upon hovering menu. IMHO Menu should be a separate element.
However, to help you out with your current HTML and css, you can try something like this
.nav ul {
padding: 20px 0;
position: absolute;
top: 0;
left: 0;
background: url(../images/icon-menu.png) no-repeat 10px 11px;
width: 74px;
background-color: #5B9BD5;
z-index: 1000;
height:0px;
-webkit-transition:all 1s;
}
.nav li {
-webkit-transition:-webkit-transform 1s;
-webkit-transform:translate(-100%);
/* hide all <li> items*/
transform:translate(-100%);
margin: 0;
width:75px;
}
.nav ul:hover {
height:auto;
}
.nav ul:hover li {
display: block;
margin: 5px 0 0 0;
-webkit-transform:translate(0%);
transform:translate(0%);
}
JSFiddle
side note: above works in webkit browsers and latest browsers that doesn't require prefix for css3 transitions. remember to specify other browser prefixes to make it work cross browser
Related
Closed. This question is not reproducible or was caused by typos. It is not currently accepting answers.
This question was caused by a typo or a problem that can no longer be reproduced. While similar questions may be on-topic here, this one was resolved in a way less likely to help future readers.
Closed 2 months ago.
This post was edited and submitted for review 2 months ago and failed to reopen the post:
Original close reason(s) were not resolved
Improve this question
The links in my nav bar have a :hover effect where the font size is increased and a box shadow is added. Everything works fine except that, when the curser leaves the nav link, the other nav elements do a little hop (they move up a bit for just a moment, then back down to their original position). I'm not sure why this is happening or how to fix it. Any suggestions would be greatly appreciated. Thanks!
Edit: To reproduce this issue, follow the link to the site, use the dropdown field near the top left of the page to select the "Rounded and fun (Google style)" option, hover over the nav links in the top right then move your mouse off of the link. You should see the other links move up briefly, then move back down
I had the same problem on this site with the default stylesheet that had the links styled differently but had a somewhat similar :hover effect (increased font size and add a bottom border). I was able to fix that issue by decreasing the bottom padding a bit on :hover, but I tried that for this issue and it did not work.
I'm using plain HTML 5 and CSS 3.
I've attached the HTML, and all CSS related to the nav/header elements as well as a link to the webpage itself. My page has multiple stylesheets that the user can switch between using the dropdown field. My issue is related to the "rounded" style
This is my first "full" website that I've made (I'm currently going through a course on Codecademy) and it is also my portfolio site. So any suggestions on general improvements to the site/best practices are also welcome.
Site Link
https://jackf514.github.io/portfolio-site/
nav {
display: inline-block;
width: 50%;
padding-right: 5%;
flex-shrink: 2;
}
nav ul {
display: flex;
list-style: none;
float: right;
}
nav li {
padding: 0.5rem;
transition: font-size 0.1s;
}
nav a {
text-decoration: none;
color: hsla(210, 40%, 45%, 1);
font-size: 1.375rem;
transition: font-size 0.1s, color 0.5s, box-shadow 0.25s;
}
nav li:hover {
border-bottom: 2px solid hsla(210, 40%, 20%, 1);
padding-bottom: 6px;
font-size: 1.425rem;
}
nav li:active {
color: hsla(210, 40%, 35%, 1);
font-size: 1.4rem;
border-bottom-width: 1px;
}
nav a {
margin-left: 10px;
}
nav li {
padding: 8px 12px;
border: 1px solid hsla(210, 40%, 20%, 1) !important;
}
nav a,
nav li {
border-radius: 25px;
}
nav li:hover {
box-shadow: 0px 2px 3px hsla(210, 0%, 20%, 1);
font-size: 1.475rem;
padding-bottom: 6px;
}
/*nav a:hover li {
padding: 6px 12px 5px 12px;
border-width: 0px;
}
nav a:hover {
box-shadow: 0px 3px 3px hsla(210, 0%, 20%, 1);
font-size: 1.475rem;
}*/
<header>
<div id='title'>
<a href="#top">
<h1>Jack Ferguson</h1>
</a>
</div>
<nav>
<ul>
<a href="#about">
<li>About Me</li>
</a>
<a href="#projects">
<li>My Projects</li>
</a>
<a href="#contact">
<li>Contact Me</li>
</a>
</ul>
</nav>
</header>
There are multiple ways to fix this.
The reason for horizontal expand on hover is because of font size increase. When your font size changes, size of your ul container also changes. Hence , causing weird effect on hover.
I would recommend using scale for such transition instead of font size. It makes more sense and is easier to debug.
As of setting border , you can also use text-underline.
nav li:hover {
/* border-bottom: 2px solid hsla(210, 40%, 20%, 1); */
/* padding-bottom: 6px; */
/* font-size: 1.425rem; */
scale: 1.1;
text-decoration: underline;
text-underline-offset: 8px;
}
On your site, you could replace flex on your UL with grid, like the following:
display: grid;
grid-template-columns: 127px 144px 139px;
That being said, I wouldn't recommend it, because then you'd have to change the px values every time you update your menu. It is an option if you don't mind doing that though.
The reason why the shifting is occuring is because when the font size increases, it also increases the size of the menu. So the spacings need to readjust to accomodate. With flex, the sizes are done automatically based on the content so it needs to adjust. With the grid approach, you're specifying how big you want each menu item to be, so no shifting occurs.
IMO you should just do an underline and forgo the font increase altogether.
Also, for proper syntax make sure your list structure is as follows (as of now you have the a and li mixed up).
<ul>
<li>
<a></a>
</li>
</ul>
I've downloaded the CSS and HTML files directly from your website you provided above.
What's important to understand is that because of the flex display type, when you perform the transition the elements themselves change size to accommodate the transitions
A helpful tool I like to use to debug when I have size issues via margin, border, padding, or element sizing on my pages is to apply a random color to the specified elements background via background-color. These will let you see in real time how your hover is changing the actual size of the element you are looking at and also how all your elements interact with each other on the page. (this affect can also be seen to a lesser extent via the developer tools in your browser)
Using the background trick we can see that on Hover your ul element is changing its height and because of this causing all the other elements in it to move as well such that they are centered.
ul{
height:50px;
}
adding this to your style sheet allows the enough head room for the div when it grows to not resize it all and removes the vertical hoping around of your list items on hover. They will still move sideways due to the above mentioned resizing. This could be removed if space is added between the li
Understanding how each layer is built on top of each other is super important for how your site will look and understanding how things are affected. If your like me putting in the debug colors on your elements backgrounds can be a super useful tool to understanding how they are arranged on your page
I’m leveraging Codrops’ slowly aging but still relevant ‘Inline Anchor Styles’ kit. Codrops’ original live demo can be found here. For my site, I’m using the ‘link-arrow’ theme.
I’ve got most of it to work as intended. My problem is that I can’t figure out how to make the longer anchor tagged web links to wrap to the next line.
Here is my reduced test case on CodePen, which also shows the HTML and CSS I am working with. When you are viewing that Pen, if you reduce the size of your browser window, you’ll notice that the very first web link is obscured and extends way over to the right beyond the boundary of the window. What I am trying to do is make the web links wrap to the next line (similar to the way the regular non-anchor tag <li> contents already do).
To further clarify what I am trying to accomplish, you can take a look at this screenshot on imgur. There are 4 red arrows pointing to the anchor tag contents which extend beyond the browser window.
How do you get the content inside the anchor tags to wrap to the next line?
After importing Codrops' HTML, CSS, and JS source code linked to above, these are the only modifications I've made:
body {
background: #f9f9f9;
width: 100%;
font-size: 133%;
margin: auto;
}
.box {
margin-left:-60px;
}
li {
line-height: 150%;
font-size: 1.2em;
padding-bottom: 15px;
}
ol {
margin: 0;
}
ol.dashed {
list-style-type: none;
}
ol.dashed > li {
text-indent: 5px;
}
ol.dashed > li:before {
content: "- ";
text-indent: 5px;
}
.container {
width:100%;
}
What I’ve tried:
I’ve tried adjusting width and max-width values from 100% progressively down to 50% for all the elements in play including the body, ol, li, a elements in addition to the classes in play such as .container and .box. No dice.
I have carefully checked your code on codepen and Codrops's Inline Anchor Styles.
I have found a very simple solution after analyzing your problem, there are two places where the code needs to be adjusted is:
this code code must not include line white-space: nowrap, it should be removed. When removing we need to setup after position of anchor from top: 0
And boom now we changed two snippset as follows:
section a {
position: relative;
display: inline-block;
outline: none;
color: #404d5b;
vertical-align: bottom;
text-decoration: none;
}
.link-arrow a::after {
left: 100%;
z-index: -2;
width: 1em;
background: #34495e url('./arrow_right.svg') no-repeat 50% 50%;
background-size: 60% auto;
text-align: center;
font-family: Arial, sans-serif;
-webkit-transition: -webkit-transform 0.3s;
transition: transform 0.3s;
pointer-events: auto;
top: 0
}
Now Your Anchor tag will not be overflown again.
Based on #Umar_Ahmed's code snippet, I was able to reduce the solution down to this:
section a {
color: black;
text-decoration: none;
white-space: normal;
}
.link-arrow a::after {
pointer-events: auto;
top:0;
}
But I am giving full credit to Umar as the official answer to my question. ;)
Thank you Umar!
Question: What's the best way to create a horizontal menu with drop down capabilities that can be dynamically resized? (Or preferably, how can I edit my current menu to behave like that?)
Explanation: I'm using a thin, horizontal drop-down menu as the main navigation on my site. When the browser window is at full width, there are no problems, but when it is resized, the right-most link pushes down to the next line, as it is floated.
Horizontal menus are such a common thing, I know there have to be some common tricks and ways to create them so that they can be dynamically resized. So if trying to fix my current menu is too burdensome, I would be fine just to hear some tips or read some stuff on how to create better horizontal menus.
Here is what I think would be the main problem:
.menu2 li {
position: relative;
float: left;
width: 150px;
z-index: 1000
}
I've tried different combinations of making this inline and making other tweeks, such as making the 150px width into a percentage, but that would create all sorts of alignment issues with the text.
Here is a demo with all of the code now: http://jsfiddle.net/HSVdg/1/
Some notes on the above link:
I am using Tiny Drop Down 2 (http://sandbox.scriptiny.com/tinydropdown2/) for drop-down functionality (in the form of JS and CSS, which are noted in comments), though the drop down is not actually working in the jsfiddle. I'm pretty sure all of the JS is irrelevant to my main question.
Tiny Drop Down uses a lot of CSS, so it's been quite difficult for me to try and make little tweeks.
The buttons are not vertically lined up with the actual bar, but again this is not the main issue since this is not happening on my actual site.
The window size in the jsfiddle doesn't actually accomodate the entire length of buttons, so you immediately see the problem of the buttons moving to the next line.
Try my version, with display table/table-cell:
http://jsfiddle.net/HSVdg/10/
I've basically just replaced floats with display: table on .menu2 and display: table-cell on its children (li's)
This is how i see it
<nav>
<ul>
<li id="youarehere">Home
<li><a>Products</a>
<li><a>Services</a>
<li><a>Contact Us</a>
</ul>
</nav>
ul#navigation {
float: left;
margin: 0;
padding: 0;
width: 100%;
background-color: #039;
}
ul#navigation li { display: inline; }
ul#navigation li a {
text-decoration: none;
padding: .25em 1em;
border-bottom: solid 1px #39f;
border-top: solid 1px #39f;
border-right: solid 1px #39f;
}
a:link, a:visited { color: #fff; }
ul#navigation li a:hover {
background-color: #fff;
color: #000;
}
ul#navigation li#youarehere a { background-color: #09f; }
I have an HTML / CSS project on JS Fiddle with several issues jsfiddle ZyBZT.
The <DIV class"footer"> is not showing up at the bottom.
The background image does not display: url('http://i.imgur.com/z5vCh.png')
The Sprite Images are not showing up in the <UL> list.
Originally, the Sprites were working, and nothing I had added has changed any of the Sprite CSS code, which is as follows:
#nav {
list-style-type:none; /* removes the bullet from the list */
margin:20 auto;
text-shadow:4px 4px 8px #696969; /* creates a drop shadow on text in non-IE browsers */
white-space:nowrap; /* ensures text stays on one line */
width:600px; /* Allows links to take up proper height */
}
#nav li {
display: inline-block;
text-align: center;
width: 192px;
}
#nav a {
background: url('http://i.imgur.com/Sp7jc.gif') 0 -100px no-repeat;
display: block;
height: 50px; /* This allowed the buttons to be full height */
color: Blue;
}
#nav a:hover {
background-position: 0 -50px;
color:Red;
}
#nav .active, a:hover {
background-position: 0 0;
color: Black;
}
#nav .active:hover {
background-position: 0 0;
color: Black;
}
#nav span {
position:relative;
text-align: center;
vertical-align: middle; /* This doesn't seem to work (???) */
}
Sometimes, the background image works, but other times it does not.
Lately, I have been trying to get this FOOTER div to work, and now it appears that much more of it is messed up.
How am I supposed to be able to tell when one piece of CSS breaks another piece of CSS? How do I tell when something tries to execute the CSS and there is an error?
The best you can to is to
Use Firebug or the browser developer tools of your choice to see what classes/styles the browser is applying, and the effects, and
Study the HTML standards to make sure you're coding them correctly; keep in mind that they are often counter-intuitive. MDN has some excellent articles on HTML layout, vertical alignment and many other HTML/CSS/Javascript topics.
Fixed the footer problem easy enough:
div.footer {
bottom:0px;
position:fixed;
text-align:center;
}
However, this does NOT answer the main question: How to Troubleshoot!
Best tool I've found for this is Firebug, it's still better than Chrome's tools. When you inspect an element it will show you the hierarchy of applied styles and those styles that have been overridden. (with strikethrough)
This is your best tool to see what is happening.
I think you're having z-index issues and the text-shadow is causing issues.
Removed the z-index:-1 and the text-shadow and the background behaves.
I have a menu and a search box. I would like to put the search box along with menu items. But my menu is being built in a different file in a div called 'custommenu' which uses the following css:
#custommenu {
position:relative;
z-index:999;
font-size: 14px;
margin: 0 auto;
padding: 10px 16px;
width: 918px;
background-color: #FB0A51;
border-top-left-radius: 10px 10px;
-moz-border-top-left-radius: 10px 10px;
border-top-right-radius: 10px 10px;
-moz-border-top-right-radius: 10px 10px;
}
Whereas I have my search box in a separate file which looks like this:
<div class="header">
some code
<div class="quick-access">
some code
<php echo $this->getChildHtml('topSearch') ?>;
</div>
</div>
I tried adding the following to the css file so that the search box comes on top of the menu but it did not work
.header .form-search {
position:absolute;
right:29px;
z-index:1000;
top: 80px;
width:315px;
height:30px;
padding:1px 0 0 16px;
}
Still the search box gets hidden behind the menu. I would like to have the search box n the menu. How do i do it?
EDIT: Here's the css of the div's which contains the search box,
.header { width:930px; margin:0 auto; padding:10px; text-align:right; position:relative; z-index:10; border-top:3px solid #3C3C42;}
.header .quick-access { float:right; width:600px;margin-top:-125px; padding:28px 10px 0 0; }
.header .form-search { position:relative; top: 100px;left: 300px; z-index:9999; width:315px; height:30px; padding:1px 0 0 16px; }
And this is how it looks right now, (purple links - quick access, white box is search which is going behind the pink 'custommenu' area. I would like to have the white box on the pink area. And all of this is inside 'header')
#all
Sorry for replying very late. But I found the solution after a little bit of fiddling. I set the z-index of my header to a higher value than my custommenu. Since my header contains the search box it needed to have a higher value for the search box to come over the menu.
The code looks like this now
.header{ position: relative; z-index: 4000; }
.header search { position: relative; z-index: 99999; }
.custommenu { position: relative; z-index: 1000 ;}
This perfectly got my search box on top of my menu aligned. Thanks again for all those who helped. Appreciate it.
Try with float? or display:block;
If I was using this code, I would write the css like this:
position:relative;
left:some value;
top:some value;
Z-index: -999
The search box appearing behind the menu sounds like a z-index issue - perhaps the container of the menu has a higher z-index to the search box, try changing the searchbox z-index to 999999.
z-index requires non-static positioning however it is not clear from your code examples which type of positioning is actually used by the elements you are trying to stack with z-index.
Either way here is a very helpful tool which might help you determine which type of positioning you have to use for your elements in regards to how they relate.
http://tjkdesign.com/articles/z-index/teach_yourself_how_elements_stack.asp