I get some HTML and CSS code.
https://codepen.io/lbebber/pen/pvwZJp
.menu-item,
.menu-open-button {
background: #00bcd4;
border-radius: 100%;
width: 80px;
height: 80px;
margin-left: -40px;
position: absolute;
color: white;
text-align: center;
line-height: 80px;
transform: translate3d(0, 0, 0);
transition: transform ease-out 200ms;
}
I tried to use this code, but I did not succeed pushing the hamburger menu to be at the bottom-left corner.
I think something outside the part I copied here is blocking the menu to get it to the bottom.
The second thing, I wanted to use little pictures instead of icons.
Do you have an idea how?
When I add a picture, I am getting weird behavior.
Thank you for your help in advance.
Code is Fixed!
So in your .menu attribute, I added the following. These attributes move your menu (.menu) in a fixed position in the bottom left of the screen.
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
I removed the margin-left:-80px; as this caused your menu to warp halfway off the left of the screen when I added the other attributes above. So your .menu attribute should look like this when the proper attributes are edited:
.menu{
#extend %goo;
$width:650px;
$height:150px;
position: fixed;
bottom: 0;
left: 0;
z-index: 998;
padding-top:20px;
padding-left:80px;
width:$width;
height:$height;
box-sizing:border-box;
font-size:20px;
text-align:left;
}
This resulted (on codepen) with your site looking like this. Of course, the gooey menu opens as shown below. I cannot insert the code into stack overflow as there were issues with layout and content. But if you make the changes to your CSS code above, you can see your menu working
[
Related
I am trying to "hide" any overflow from a diagonal line inside of a table <td> element.
example: https://jsfiddle.net/edwardsmarkf/8zuk6naL/47/
span#diagLine {
transform: rotate(345deg);
transform-origin: left bottom;
position: absolute;
...........
z-index: -100; /* does not do anything! */
overflow: hidden; /* does not do anything! */
}
In my example copied from here and here,the z-index does not seem to work for me even though the position is absolute as suggested here and here. And the overflow property does not appear to work for me either.
It behaves as if a diagonal line is special and the CSS properties no longer apply to it.
I was unable to find any SO suggestions that apply to a diagonal line inside of a table <td> element.
I could probably do something with jScript, but was hoping for a pure CSS solution, hopefully with just minimal changes. Or maybe I have missed something very obvious?
Thank you very much.
ok I figure out you can use a class (.bottom) for the "seeable" td
check this out
span#diagLine {
margin-left: 0px;
margin-top: 10px;
transform: rotate(345deg);
transform-origin: left bottom;
position: absolute;
display:relative;
text-decoration: none;
color: blue;
font-size: 13px;
z-index:-10;
}
td.styleTableTdItem {
width: 60px;
height: 60px;
z-index: 1;
}
td:not(.bottom){
background-color:white
}
https://jsfiddle.net/s23fhdbe/1/
You can add something like this if you are dealing only with the elements shown in the example
td:last-child{
background-color:white
}
I want to have to click on a hamburger menu icon and then have the list display beneath my icon. I set up my hamburger menu icon with this style
.menu-btn div {
position: absolute;
left: 100%;
top: 64%;
padding-right: 8px;
margin-top: -0.50em;
line-height: 1.2;
font-size: 18px;
font-weight: 200;
vertical-align: middle;
z-index: 99;
}
.menu-btn span {
display: block;
width: 20px;
height: 2px;
margin: 4px 0;
background: #989da1;
z-index: 99;
}
The menu of options taht should appear after you click on the hamburger menu is
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
but I'm unclear how to set up the style of the hamburger menu so taht it appears directly under the hamburger menu when you click on it. Right now, its appearing centered at the top of the screen -- https://jsfiddle.net/wtp1k57b/1/ . How do I set up such a style?
PS - I'm looking for a solution that doesn't rely on hard-coding numeric (e.g. top: 27px) pixel values. Certainly its good to get things to work in my little Fiddle, but in my broader application I can't guarantee how big or small that hamburger menu will be.
I would like to show a completely different approach without using display: flex.
HTML
Your approach uses too many wrappers in my opinion. You can definitely reduce the amount of divs. Moreover, you should always try to use semantic tags over general tags like div or ul. Consider looking at this article.
Hence, as #scooterlord already mentioned, you should use a button for the hamburger icon. Moreover, I recommend to use a nav instead of a list.
CSS
First of all, you should bundle the attributes for the same selector at the same place for the purpose of improved clarity. You should not have three sections where you apply the universal selector, but combine it into one. Moreover, do not set the box-sizing to a specific value, but rather set it to inherit, so you can always override this value for a specific element without having to do it for all of its children. Furthermore, I do not understand what you want to achieve with margin: 0 auto on all elements and body. It does not make any sense for me.
Since you do not want to use absolute positioning, I would strongly advise you to avoid using pixels as a measuring unit. They behave badly if some people change their default font-size because of poor eyesight or other reasons. Instead, consider to apply relative units like rem, em or %. By setting the root element's font-size to 62.5% you are still able to calculate as if you were using pixels (1rem = 10px).
As I already mentioned, I avoided to use display: flex for such a trivial thing. I do not understand why it should be used at this point. Therefore, I also had to change the positioning of the menu button. The navigation could be easily positioned using percentages for top and left.
As a side note: You should really try to only post the relevant CSS code - the first step for me was to remove all the irrelevant parts of it.
Final Solution
This is my final solution without Flexbox, without fixed sizes and without absolute positioning using px:
$('.menu-btn').click(function() {
$('nav').toggleClass('nav-open');
});
* {
margin: 0;
padding: 0;
box-sizing: inherit;
}
html {
font-size: 62.5%;
}
body {
font: 1.6rem/1.4 Benton Sans, -apple-system, BlinkMacSystemFont, Roboto, Helvetica Neue, Helvetica, Tahoma, Arial, sans-serif;
-webkit-font-smoothing: antialiased;
box-sizing: border-box;
}
header {
width: 100%;
background-color: orange;
text-align: center;
padding: 1rem;
position: relative;
}
nav {
display: none;
width: 30rem;
padding: 5rem;
background-color: #ededed;
position: absolute;
right: 5%;
top: 100%;
}
.nav-open {
display: block;
}
nav a {
display: block;
width: 100%;
text-align: center;
padding: 1.4rem 1.6rem;
text-decoration: none;
cursor: pointer;
font-size: 2.2rem;
color: #000;
}
nav a:hover {
background-color: #111;
color: #fff;
}
.menu-btn {
position: absolute;
right: 5%;
top: 50%;
margin-top: -1.1rem;
display: inline-block;
cursor: pointer;
border: none;
outline: none;
background-color: transparent;
}
#media only screen and (min-width: 500px) {
.menu-btn, nav {
display: none !important;
}
}
.menu-btn span {
display: block;
width: 2rem;
height: 0.2rem;
margin: 0.4rem 0;
background: #989da1;
z-index: 99;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header>
<h2>Page Title</h2>
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<nav>
Vote
Search
About
Log In
</nav>
</header>
Or see this fiddle.
Use the css properties: top and right to set the position of the element under your icon.
#menu
{
position: absolute;
top: 48px;
right: 2px;
background: #ededed;
list-style-type: none;
}
Use this CSS for your menu - no margin, and the position defined by the top and right settings:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 50px;
right: 0;
}
https://jsfiddle.net/meuexde6/
I left out the transition for the testing, but you should basically animate the right parameter from -100px to 0 to achieve what you seemed to have in mind.
ADDITION AFTER COMMENT:
To define the position of the menu in relation to the button, you have to apply position: relative to their common parent element, .mobile-nav. The position values of an element with position: absolute always relate to the first ancestor which has position: relative.
I changed the values in my updated fiddle accordingly to these:
#menu {
position: absolute;
width: 300px;
margin: 0;
padding: 50px;
background: #ededed;
list-style-type: none;
-webkit-font-smoothing: antialiased;
top: 40px;
right: -32px;
}
Updated fiddle: https://jsfiddle.net/meuexde6/1/
If you really want the menu to stick directly to the button (hard to say - it has no borders), just adjust the top and right values as needed.
HTML5 Semantic Elements.
details > summary {
padding: 2px 6px;
width:12px;
border: none;
list-style: none;
}
details > summary::-webkit-details-marker {
display: none;
}
ul{
list-style: none;
margin-left:0;
padding-left:0;
}
<details>
<summary>☰</summary>
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
</ul>
</details>
So, here goes. I know you are asking for a solution to a specific problem, I solved it alright, but I couldn't help noticing that you are struggling with your code. You must simplify the way you think and your code will become leaner. The purpose of this forum is to help others become better, right? :)
HTML
It is good practice to keep the menu toggle button OUTSIDE of the menu - will solve a lot of issues - check below.
It is not semantically right to use anything else rather than a button for the toggle function, so, why not use a button here? I also removed unnecessary clutter from your code, like some divs and the id - the id could be traded with the class, your call. I also removed .mobile-nav because it is not needed at all.
<button class="menu-btn">
<span></span>
<span></span>
<span></span>
</button>
<div class="responsive-menu">
<ul id="menu">
<li>Vote</li>
<li>Search</li>
<li>About</li>
<li>Log In</li>
</ul>
</div>
CSS
I absolutely positioned the menu-btn on the top right corner, and gave it a width equal to the #pageTitle height (which I set at 50px - a gold standard) to keep it rectangular; it should be a rule of thumb that the toggle buttons are rectangular and always the same height as the top navigation bar - in this case the before-mentioned id. The same I did for the .responsive-menu. I absolutely positioned it as shown below. The changes allowed me to remove a lot of css styling - now obsolete - like for example the absolute positioning of the ul menu inside the .responsive-menu.
.menu-btn {
position:absolute;
display:block;
right:0;
top:0;
width:50px;
height:50px;
background:yellow;
border:none;
padding:16px;
}
.responsive-menu {
position: absolute;
top: 50px;
right: 0;
display: none;
}
Javascript
By years of practice I realized that the most efficient way to toggle a menu instead of adding and removing classes is to add a class on the body tag; this can help heaps if you want to restyle anything else on the page depending on wether your menu is opened or not.
$('.menu-btn').on('click', function() {
$('body').toggleClass('responsive-menu-open');
});
Here is a working jsfiddle: https://jsfiddle.net/scooterlord/4atafhge/
I could have done a lot of other things in order to simplify the code even further - remove unnecessary ids and classes since most elements are considered unique and could be targeted using descendant classes, eg .responsive-menu ul, etc. After a lot of practice, you'll manage to think simpler and produce code with a smaller footprint.
Edit: Concerning the fact that you don't like the absolute pixels for alignment here is a trick.
Giving a fixed height to the parent container, equal to the toggle button's -in this case '#pageTitle' and setting its position to relative allows you to use top:100% to properly place the responsive menu exactly below the button (which is essentially the same height):
#pageTitle {
display: flex;
height: 50px;
position:relative;
}
.responsive-menu {
position: absolute;
top: 100%;
right: 0;
display: none;
}
Here is an updated fiddle: https://jsfiddle.net/scooterlord/4atafhge/1/
Edit: Natalia, I gave it some thought and here is what I came up with. I created an absolutely positioned .menu-wrapper, inside of which I placed the button and the responsive menu with float:right and no positioning - aka they are positioned statically. No more pixel values! YAY!
.menu-wrapper {
position:absolute;
top:0;
right:0;
}
.menu-btn {
float:right;
...
}
.responsive-menu {
float:right;
clear:both; // to clear the .menu-btn and sit exactly below it
...
}
Here is a working fiddle: https://jsfiddle.net/scooterlord/4atafhge/2/
I have a code like this
<div style="position: absolute; margin-left: -22px; margin-top: -22px; left: 502px; top: 379px; z-index: 380; display: block;" class="maptimize_marker_0 f st">1<span class="pinlabel">1B 100E</span></div>
I also have CSS for pinlabel
.pinlabel{
display: none;
position: absolute;
background-color: #3774d5;
height: 16px;
width: 200px;
color: white;
top: 0px;
left: 1px;
font-size: 10px !important;
border-radius: 10px;
border: white 2px solid;}
.maptimize_marker_0:hover span.pinlabel {display:block;}
But I cant get the Hover state work. If to Force hover state in developer tool in chrome everything works fine, but not working when mouse is over... What am I doing wrong? Also I want to put span Under the div, but the span is always on top and covers the div background picture... Please help!
I'm not sure what your problem is, on http://jsfiddle.net/abrunet/Bb9T3/, I copy paste your code and the hover is working..
Last, your span does not have a z-index specified. You might chose one, lower than the divs one and an other higher for the hover case.
You should also try to separate your style in a different sheet to keep your code clean.
Let me know if I misunderstood your question.
I am trying to create a div that is square on the top site and flows into a triangle,
the square part is not so hard, and works fine, but the triangle part is a bit harder.
The box needs to change from size with the screen size, in the square i did this by using % in the width and height, but i cannot use the % sign in the border property
The code i have on this moment
HTML
<div id="overV12" class="menuItem" onclick="scrollToT('#overons')" onmouseover="setHover('overV12')" onmouseout="setOldClass('overV12')"><div class="menuInner">Over V12</div></div>
CSS
div.menuItem
{
height: 5.38%;
width: 7.44%;
position: fixed;
background-color: rgb(239, 239, 239);
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
}
div.menuItemHover
{
height: 5.38%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: rgb(211, 211, 211);
}
div.menuItemActive
{
height: 7.8%;
width: 7.44%;
position: fixed;
cursor: pointer;
z-index: 12;
text-align: center;
top: 4.3%;
background-color: Black;
color: White;
}
The JavaScript is used for setting the class: i did this because i use a parralax library and wanted to set the button on "active" on a certain height
i hope someone can help me (and perhaps others) with this problem
jsfiddle
example
My idea is that when the div is set on class menuItemActive, it will have the arrow, else not
This is only when it is set on active
This uses two overlapping divs to create the triangle and this method to make things fluid while maintaining the aspect ratio.
Working Example
.div1 {
width:100%;
height:100%;
border: 1px solid red;
position:absolute;
z-index:2;
}
.div2 {
width:70%;
min-height:70%;
transform:rotate(45deg);
border:1px solid blue;
position:absolute;
left:15%;
top:65%;
z-index:1;
}
#container {
display: inline-block;
position: relative;
width: 25%;
}
#dummy {
padding-top: 100%;
}
#element {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
I left it without a background so you could see how it works.
You can do triangles in CSS.
Here's a link to an article, outlining the general technique: http://css-tricks.com/snippets/css/css-triangle/. There's also a variety of similar/other approaches for slightly different situations I've found and used, just search "css triangles".
To briefly describe the technique: it uses four borders on an element (if you wanted a down arrow, you'd put this element inside your <div id="overV12">, or depending on the effect, apply it to your inner <div>). Some are transparent, some aren't. By changing the border widths and colors, you can generate CSS triangles, which can be fully customized to form different angle degrees, lengths, etc. I've also seen this concept used to create CSS-only speech bubbles as well as tooltip handles.
I've used this technique extensively, and in my use cases, it worked in every browser (although I do remember having a problem with IE6 on one project).
I found the solution by using javascript instead of percentage,
Fiddle
I hope this can help some other people as well
The java script i used is this:
$(document).ready(setSize());
function setSize() {
var halfWidth = ($('.div1').width()) / 2;
$('.div2').css('border-width', ('50px ' + halfWidth + 'px 0 ' + halfWidth + 'px'));
$('.div2').css('top', ($('.div1').height()));
}
its better to use a background image for custom shaped like this
it'll make it easier to manager and you can make it adjust itself for different resolutions easily
I'm having some issues with a button in IE7. In everything else the button appears like this:
However, in IE7 the button appears like this.
I've tried to put together a jsfiddle with the code that is affecting the overall form and the fiddle seems okay (even though it is missing the image references) so I don't understand why IE7 is throwing a fit with this button and making it appear on the right of my content.
JsFiddle Code
JsFiddle
If i open this one in IE it works fine for me. any way give
<div class="logindetails password" style="clear:both;">
to the above div.
This should fix the issue in IE 7
div.links {
clear: both !important;
margin: 0 !important;
padding-top: 15px;
}
In the stylesheet, icams_specific.css find this section and replace all of it with this:
div.widget-container > div.search > form.search > div#search_links > input.button {
background-color: #E7E7E8;
background-image: url("/incl/images/search.png");
background-position: 50% 50%;
background-repeat: no-repeat;
border: medium none;
cursor: pointer;
height: 35px;
margin-left: 257px;
margin-top: -35px;
padding: 0;
transition: all 0.25s linear 0s;
vertical-align: top;
width: 38px;
}
To move the search button left right, change margin-left: 257px; to the required value.
You will also need to keep the change made to div.links above