I currently have a lack of idea on a css menu that I would like to realize. What I would like to do is that my menu is up and not down but that my TEST is at the top of my list and does not move until I no longer have my mouse on it. I don’t know how to do that right now, and if anyone has any ideas, I take it.Thank you for a good day.
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 413px;
left: 120px;
width: 192px;
height: 68px;
font-size: 20px;
}
.span1:hover {
background-color: #e83737;
position: absolute;
left: 120px;
top: 123px;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
position: absolute;
width: 192px;
top: 190px;
left: 120px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
Codepen demo: https://codepen.io/tiboo__/pen/XWjoeQB
Not sure if I got what you're trying to achieve but try to change .span1:hover { to .dropdown:hover .span1 {.
There must be a relative positioned parent for a child absolute block.
Add this to your css:
.dropdown {
position: relative;
}
And the positioning rules for .span1:
top: 0;
left: 0;
Also, some selectors contained extra rules and selectors.
.dropdown {
position: relative;
}
.span1 {
background-color: #e83737;
color: white;
position: absolute;
text-align: center;
vertical-align: middle;
line-height: 60px;
top: 0;
left: 0;
width: 192px;
height: 68px;
font-size: 20px;
}
.dropdown ul li:hover ul {
height: initial;
bottom: 100%;
overflow: visible;
background: lightgray;
}
.dropdown-child {
display: none;
background-color: #f28c8c;
width: 192px;
}
.dropdown-child a {
color: white;
padding: 20px;
text-decoration: none;
display: block;
}
.dropdown:hover .dropdown-child {
display: block;
}
<div class="dropdown">
<span class="span1">TEST</span>
<div class="dropdown-child">
abc
abc
abc
abc
</div>
</div>
Related
I have been hours trying to align this absurd code. How can I align the menu to the right?
var k = 0;
function fnclick() {
document.documentElement.style.setProperty("--display", k ? "none" : "block");
k = 1 - k;
}
:root {
--display: none;
--width: 30%;
--height: 5%;
--bgcolor1: #222222;
--bgcolor2: #222299;
--bgcolor3: #2222FF;
font-family: Arial;
font-size: 14px;
}
a:hover,
a#mnu:hover {
background-color: var(--bgcolor2);
}
a:active,
a#mnu:active {
background-color: var(--bgcolor3);
}
body {}
a {
display: var(--display, block);
display: block;
width: var(--width);
height: var(--height);
padding: 5px;
background-color: var(--bgcolor1);
text-decoration: none;
text-align: center;
color: #FFFFFF;
}
div#navbar {
border: 1px solid #ff1100;
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
a#mnu {
display: block;
width: 10%;
height: var(--height);
padding: 2px;
background-color: var(--bgcolor1);
color: #FFFFFF;
border: 0px;
}
<div id="navbar">
<a id="mnu" onclick="fnclick()">☰</a>
<a id="mnuExit" onclick="mnuRefr()">Exit</a>
<a id="mnuRefr" onclick="mnuRefr()">Refresh</a>
<a id="mnuOpts" onclick="mnuOpts()">Chart Options</a>
<a id="mnuSlct" onclick="mnuSlct()">Select Channels</a>
<a id="mnuSave" onclick="mnuSave()">Save Snapshot</a>
<a id="mnuHalt" onclick="mnuHalt()">Halt Plot</a>
</div>
<div>This absurd text keeps moving with every action of the menu, and do not keep QUIET, since the menu do not float freely over the text....</div>
Let's say I have an element with class alignRight
<div class="alignRight"> My Menu Item </div>
Now write some css for the above element
div.alignRight{
display: flex;
top: 0px;
right: 0px;
position: fixed;
margin-top: 10px;
margin-right: 10px;
justify-content: center;
align-items: center;
}
Here are 3 important lines
top: 0px;
right: 0px;
position: fixed;
the gray buttons show on top of the gif image in mobile version also they are not responsive and show quite big. If you have any ideas i would highly appreaciate.
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: relative;
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
<div class="imagebox">
<img src="https://media.gettyimages.com/photos/young-man-at-sunset-picture-id496261146?s=612x612" width="472px" height="423px" />
</div>
<div class="textbox-cont">
<div class="textbox">
<button style="background-color:#CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;">Natural Silver</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 160px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px; ;">Night Blue</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Cardinal Red</button><br>
<button style="background-color: #CBCACA;
border: none;
color: white;
padding: 15px 150px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px; margin-top: 8px;">Coral Orange</button>
<br>
<p><b>Custom colors are available upon request.</b></p>
</div>
</div>
I think one way you could approach this is use flexbox. Based on your question, this should work for you:
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
display: flex;
flex-direction: column;
}
Also, your buttons appear large likely because you have not adjusted their size in the media query. You will need to move the button styles out of your html and into your css file for the media query to work, since the inline css will override the referenced css file.
add position: absolute to tour class .imgbox
* {
box-sizing: border-box;
}
.imagebox {
width: 50%;
float: left;
height: 300px;
position: absolute; //ADD POSITION ABSOLUTE
}
.imagebox img {
position: relative;
top: 50%;
transform: translateY(-50%);
overflow: hidden;
width: 100%;
}
.textbox-cont {
width: 50%;
height: 300px;
float: right;
position: relative;
overflow: hidden;
}
.textbox {
color: #000000;
position: absolute;
text-align: center;
width: 100%;
padding: 20px;
top: 50%;
transform: translateY(-50%);
}
#media only screen and (max-width: 700px) {
.imagebox,
.textbox-cont {
width: 100%;
height: 200px;
}
I recommend you use one single class to your buttons, and dismiss the "style" attribute, to this way your code is more clean
I'm trying to use buttons on the right/left sides to scroll horizontally in a div that has multiple a tags, so I can't use the same button to scroll to a #hashtag. What I am trying to do is exactly just as Google Images Search header for different tags:
Link to example
.prsc {
overflow-x: hidden;
overflow-y: hidden;
display: block;
padding-top: 1px;
}
.prs {
/* the elements inside */
display: inline-block;
height: inherit;
left: 20px;
padding-bottom: 5px;
padding-right: 5px;
position: relative;
vertical-align: top;
white-space: nowrap;
float: right;
}
.Jyg {
height: 80px;
margin: -10px 2px 0;
overflow: hidden;
display: block;
}
.ichpcnt {
-webkit-overflow-scrolling: touch;
height: 100px;
overflow-x: scroll;
overflow-y: hidden;
padding: 10px 0 0;
white-space: nowrap;
width: 100%;
display: block;
}
.Iyg {
margin-right: 6px;
display: inline-block;
}
.prc {
/* the whole inner */
margin: -30px 0px 0;
padding: 10px 0px 10px 0;
position: relative;
overflow: hidden;
}
.OYi {
height: 90px;
display: block;
}
.allPlacesBtn {
font-family: cairo;
margin-top: -40px;
margin-bottom: 25px;
font-size: 45px;
display: grid;
}
.prp {
background: white;
bottom: 0;
opacity: 1;
position: absolute;
top: 11px;
width: 20px;
z-index: 10;
display: block;
}
<div class="custHdrBtns">
<div class="allPlacesBtn"></div>
<div class="OYi prc">
<div class="prsc prse">
<div class="prs">
<div class="Jyg">
<div class="ichpcnt" id="scrollArea">
<div class="Iyg">
<div class="vc_btn3-container headBtns vc_btn3-center">
link
link
link
link
link
link
link
link
link
link
link
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
the key is using white-space: nowrap;
$('#prev').on('click', function() {
$('#menu ul').animate({
scrollLeft: '-=100'
}, 300, 'swing');
});
$('#next').on('click', function() {
$('#menu ul').animate({
scrollLeft: '+=100'
}, 300, 'swing');
});
#menu {
position: relative;
}
ul {
width: 300px;
overflow: hidden;
white-space: nowrap;
display: block;
list-style: none;
padding: 0;
}
li {
width: 80px;
height: 50px;
display: inline-block;
text-align: center;
}
li:nth-child(odd) {
background-color: yellow;
}
li:nth-child(even) {
background-color: blue;
}
#nav {
position: absolute;
top: 0;
width: 300px;
}
#prev {
display: inline-block;
position: absolute;
left: 0;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
#next {
position: absolute;
right: 0;
display: inline-block;
background-color: #ceaaaa;
padding: 5px;
cursor: pointer;
top: 10px;
font-weight: bold;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="menu">
<ul>
<li>item1</li>
<li>item2</li>
<li>item3</li>
<li>item4</li>
<li>item5</li>
<li>item6</li>
<li>item7</li>
<li>item7</li>
</ul>
<div id="nav">
<div id="prev">Prev</div>
<div id="next">Next</div>
</div>
</div>
I'm trying to make a web app that can be used on mobile.
Below is my nav bar, atop all pages of my site.
The problem is with my hamburger .icon. It can be clicked to dropdown + hide again my nav bar when the screen is resized (ex. on an iPhone). However I seem to have sporadic non-responsiveness from it at times. Almost never works on Safari or iOS. Often doesn't work on Chrome. If I refresh the page a few times or revisit the page, it works, or doesn't, like flipping a coin.
$(document).ready(function() {
"use strict";
$(".icon").click(function(){
$(".topnav").toggleClass("responsive");
});
});
header {
width: 100%;
height: 51px;
position: relative;
background-color: #52bad5;
border-bottom: 5px solid #2C9AB7;
overflow: scroll;
text-align: left; }
header a {
top: 0; }
header a .logo {
width: auto;
height: 100%;
margin: 0px 10px;
position: relative;
color: #fff;
top: 0%;
font-weight: bold;
display: inline-block;
letter-spacing: 0px;
text-decoration: none;
text-align: left; }
header .topnav {
position: relative;
display: inline-block;
top: -2px;
left: 0;
color: #f2f2f2;
text-align: center;
padding: 14px 16px 14px 16px;
text-decoration: none;
font-size: 17px; }
header .icon {
visibility: hidden;
height: 31px;
width: 20px;
position: absolute;
top: 0;
right: 0;
display: inline-block;
color: white;
text-align: center;
padding: 10px 25px;
text-decoration: none;
font-size: 25px;
z-index: 101;
cursor: pointer; }
.icon:hover, .topnav:hover {
background-color: #2C9AB7;
color: black; }
#media only screen and (max-width: 640px) {
.container header nav {
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
margin-left: 0px;
width: 100%; }
header {
position: relative;
width: 100%;
left: 0;
background-color: #52bad5;
border-bottom: 5px solid #2C9AB7;
text-align: center;
overflow: visible;
align-content: flex-end; }
header a .logo {
display: block;
float: left;
font-weight: bold;
text-align: left;
margin: 0px 0px 0px 10px;
letter-spacing: normal; }
header .topnav {
display: none; }
header .icon {
display: inline-block;
text-align: center;
visibility: visible;
cursor: pointer; }
header .responsive {
display: flex;
position: relative;
clear: left;
flex-direction: column;
width: 70px;
top: 0;
left: 0;
background: #52BAD5;
text-align: left;
z-index: 101; } }
<header>
<a href="index.html" style="text-decoration: none">
<h1 class="logo">Notes</h1></a>
<a href="index.html" class="topnav">Home</a
><a class="topnav" href="AAA.html">AAA</a
><a class="topnav" href="BBB.html">BBB</a
><a class="topnav" href="CCC.html">CCC</a
><a class="topnav" href="DDD.html">DDD</a
><div class="icon" style="cursor: pointer">☰</div>
</header>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
My fiddle https://jsfiddle.net/TMori7/nn6ofm3s/
Thanks for the time.
So I am trying to get my dropdown to work properly. The dropdown is under a list-item in my header that changes depending on what username the user have. That makes the size differ but I can't get the dropdown to follow in the width resize.
Example 1:
http://jsfiddle.net/73tUx/
Here does it work properly but what if...
Example 2:
http://jsfiddle.net/73tUx/1/
As you can see in example 2 the dropdown is wider than the list-item.
How can I make it change width as well?
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
.navItem {
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
position: absolute;
float: right;
background: #2C3E50;
margin-top: 72px;
right: 103px;
width: 150px;
height: 140px;
display: none;
z-index: -10;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}
header ul{width:100%;position:relative;}
DEMO
I made few changes here and there in css. Major one was moving padding and float from anchor to the list.
Note: That the dropdown div is so small that i had to add overflow auto to see the hidden content.
CSS:
header {
height: 72px;
width: 100%;
z-index: 999;
position: relative;
background-color: #2C3E50;
}
header ul {
margin: 0;
padding: 0;
list-style-type: none;
width: 600px;
height: 72px;
margin-left: auto;
margin-right: auto;
}
ul > li{
float: left;
padding-left: 35px;
padding-right: 35px;
padding-top: 26px;
padding-bottom: 26px;
position:relative;
}
.navItem {
text-decoration: none;
color: #FFF;
}
.navItem:hover {
background-color: #34495e;
}
header ul li a.right {
float: right;
}
.dropdown {
list-style-type: none;
}
.drop {
background: none repeat scroll 0 0 #2C3E50;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
display: none;
float: right;
height: 140px;
margin-top: 46px;
overflow: auto;
position: absolute;
right: 0;
width: 100%;
z-index: -10;
}
.drop li {
list-style-type: none;
height: 25px;
padding-top: 10px;
padding-left: 20px;
width: 123px;
}
.drop li a {
color: #FFF;
text-decoration: none;
}
.drop li:hover {
background: #34495e;
}