I need some advice and some help. I am not so much of a css guy, but I want to learn.
I am trying adjust some css for my drop down menu.
I have the following issues:
The dropdown button should be as big as the image, leaving only the area of the dropdown triangle.
The dropdown triangle should be aligned vertically in the middle and centered horizontally.
The dropdown options should be aligned with the right border and open inwards towards the left, instead of the opposite.
Can someone help me with adjusting this?
I want to learn the techniques, but trial on error is such a long way.
My code is as folowing:
<html>
<head>
<head>
<body>
<style>
body {
background-color: white;
font: normal 11px Tahoma,Verdana,Arial,Sans-Serif;
color: #222;
height: 380px;
}
.dropdown {
display: block;
display: inline-block;
margin: 0px 3px;
position: relative;
}
/* ===[ For demonstration ]=== */
.dropdown { margin-top: 25px }
/* ===[ End demonstration ]=== */
.dropdown .dropdown_button {
cursor: pointer;
width: auto;
display: inline-block;
padding: 0px 0px;
border: 1px solid silver;
-webkit-border-radius: 0px;
-moz-border-radius: 0px;
border-radius: 2px;
font-weight: bold;
color: #717780;
line-height: 16px;
text-decoration: none !important;
background: white;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button {
border: 1px solid #3B5998;
color: white;
background: silver;
-moz-border-radius-topleft: 2px;
-moz-border-radius-topright: 2px;
-moz-border-radius-bottomright: 0px;
-moz-border-radius-bottomleft: 0px;
-webkit-border-radius: 2px 2px 0px 0px;
border-radius: 2px 2px 0px 0px;
border-bottom-color: silver;
}
.dropdown input[type="checkbox"] + .dropdown_button .arrow {
display: inline-block;
width: 1px;
height: 1px;
border-top: 5px solid silver;
border-right: 5px solid transparent;
border-left: 5px solid transparent;
}
.dropdown input[type="checkbox"]:checked + .dropdown_button .arrow { border-color: white transparent transparent transparent }
.dropdown .dropdown_content {
position: absolute;
border: 1px solid #777;
padding: 0px;
background: white;
margin: 0;
display: none;
}
.dropdown .dropdown_content li {
list-style: none;
margin-left: 0px;
line-height: 16px;
border-top: 1px solid #FFF;
border-bottom: 1px solid #FFF;
margin-top: 2px;
margin-bottom: 2px;
}
.dropdown .dropdown_content li:hover {
background: silver;
}
.dropdown .dropdown_content li a {
display: block;
padding: 2px 7px;
padding-right: 15px;
color: black;
text-decoration: none !important;
white-space: nowrap;
}
.dropdown .dropdown_content li:hover a {
color: white;
text-decoration: none !important;
}
.dropdown input[type="checkbox"]:checked ~ .dropdown_content { display: block }
.dropdown input[type="checkbox"] { display: none }
</style>
Here there will be a lot of text and a lot of other menu buttons. So hope the angle of the dropdown will open to the left instead of the right.
<div class="dropdown" id="dropdown">
<input type="checkbox" id="drop1" />
<label for="drop1" class="dropdown_button"><img src="http://ichef.bbci.co.uk/wwfeatures/43_43/images/live/p0/17/tx/p017txf6.jpg" height="43" width="43" /><span class="arrow"></span></label>
<ul class="dropdown_content">
<li>Privacy settings</li>
<li>Account settings</li>
<li>Logout</li>
</ul>
</div>
</body>
</html>
Now I managed to fix the border around the image by correcting the padding padding: 0px 0px; but then I feel like working in blind...can someone help pointing me where to fix my adjustments?
Give your span an id of 'arrowSpan' and apply this style in your css:
#arrowSpan{
display:block;
margin-left:17px;
margin-top:2px;
margin-bottom:5px;
}
Also add position:absolute; and right:0 to your .dropdown .dropdown_content styles.
Here's a fiddle: http://jsfiddle.net/zsp7t/1/
As for collapsing the dropdown when clicking outside, it is possible. There's a bunch of examples online using jQuery, here's a couple that can help you get started:
Use jQuery to hide a DIV when the user clicks outside of it
Hiding a div by selecting anywhere outside of it
You also mentioned that you wanted to learn more, so check these sites out to help you increase your skills:
http://www.codecademy.com/
http://www.codeschool.com/courses
Related
Is there a way, using CSS, to make it so that when clicking a tab (as shown in the diagram below), the tab "points" to an inactive tab?
I'm trying to make it so that the green Tab 1 (in the diagram below) points to Tabs 2 and 3, and then if you click Tab 2, it points to Tab 3. However, when you click Tab 3, it would remain rectangular (with no arrow).
I have been trying various Stack Overflow snippets which successfully place the arrow above or below the tab, but none seem to work in overlapping the inactive tab next to the active tab.
This is the basic structure of my HTML:
<ul>
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
As for the CSS, I've been using snippets like this one: https://codepen.io/mimoYmima/pen/MwzQym
The issue I've been running into seems to be that, because the tabs are floated left, I can't make the active tab's arrow overlap the other tabs.
Just add triangle using pseudoelement to active tab and other to simulate triangle border. Demo:
ul {
list-style-type: none;
display: flex;
margin: 0;
padding: 0;
}
ul > li {
padding: 10px 40px;
font-weight: bold;
font-size: 24px;
height: 40px;
border: 1px solid #000;
border-right: none;
background: linear-gradient(to bottom, #fdfdfd, #828282);
}
ul > li.active {
background: #66d835;
position: relative;
}
ul > li.active:before,
ul > li.active:after {
content: "";
position: absolute;
left: 100%;
top: 0;
}
/* triangle border for active tab */
ul > li.active:before {
transform: translateX(1px);
border: 30px solid transparent;
border-left-color: #000;
z-index: 1;
}
/* triangle for active tab */
ul > li.active:after {
/* border-width equal half of the height */
border: 30px solid transparent;
border-left-color: #66d835;
z-index: 2;
}
/* border-radius for first tab */
ul > li:first-child {
border-top-left-radius: 5px;
border-bottom-left-radius: 5px;
}
/* border-radius for last tab but not active */
/* and right border */
ul > li:not(.active):last-child {
border-right: 1px solid #000;
border-top-right-radius: 5px;
border-bottom-right-radius: 5px;
}
ul > li > a {
height: 100%;
/* styles for text centering */
display: flex;
align-items: center;
justify-content: center;
}
ul > li > a,
ul > li > a:hover,
ul > li > a:active,
ul > li > a:visited {
color: inherit;
text-decoration: none;
}
<ul>
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
You can leverage a pseudo element with absolute positioning as the arrow for the active tab. It will be hidden unless the list item is given the 'active' tab. Original HTML markup remains untouched.
html,
body {
height: 100%;
margin: 0;
}
html {
font-family: sans-serif;
}
body {
display: flex;
}
ul {
margin: auto;
padding: 0;
display: inline-block;
list-style-type: none;
overflow: hidden;
background-color: #eee;
background-image: linear-gradient( #fff, #ddd);
border-radius: 1rem;
border: 1px #888 solid;
font-weight: bold;
}
li {
float: left;
padding: 1.5rem 4rem;
border-right: 1px #aaa solid;
position: relative;
}
li:last-child {
border: none;
}
a {
text-decoration: none;
color: #000;
}
.active {
background-color: #0b0;
background-image: linear-gradient( #0b0, #090 );
}
li.active::after {
content:'';
width: 3rem;
height: 3rem;
background-color: #eee;
position: absolute;
border: none;
transform: scaleX( 0.75 ) rotate( 45deg ) translate( -50% );
top: 50%;
right: -2.45rem;
margin-top: -0.45rem;
border-top: 1px #888 solid;
border-right: 1px #888 solid;
background-color: #0b0;
background-image: linear-gradient( 130deg, #0b0, #090 );
border-top-right-radius: 0.5rem;
}
<ul>
<li class="active">
Tab 1
</li>
<li>
Tab 2
</li>
<li>
Tab 3
</li>
</ul>
You don't need to float the arrow divs.
I have forked the codepen you linked to and edited the CSS to create the effect in the graphic you've shared. Here's my edited version:
https://codepen.io/sigil/pen/YxWZGa
<!-- language: lang-css -->
/* Button-arrow CSS: */
.arrow {
cursor: pointer;
display: inline-block;
height: 40px;
position: relative;
line-height: 2.5em;
padding-left: 2em;
padding-right: 2em;
background: white;
color: black;
border: 1px solid #eee;
}
.arrow:after {
border-left: 20px solid white;
}
.arrow.active {
background-color: yellow;
}
.arrow.active,
.arrow.active:after {
z-index: 50;
border-left: 20px solid yellow;
}
.arrow.active:after {
content: "";
position: absolute;
border-bottom: 20px solid transparent;
border-top: 20px solid transparent;
height: 0px;
width: 0px;
margin-right: -20px;
right: 0;
}
.arrow:hover,
.arrow:active {
background: yellow;
color: black;
}
.arrow:hover:after,
.arrow:active:after {
border-left: 20px solid yellow;
}
/* General styles to set a baseline 'look' - not related to the button-arrow CSS above */
body, html {
font-family: helvetica;
background: #333;
color: #CCC;
}
.content {
text-align: center;
margin: 0 auto;
}
a:visited, a:link {
color: #F93;
}
<!-- language: lang-html -->
<html>
<body>
<div class="content">
<p>Button with an arrow on the right. Just uses an anchor tag and css, so you can use it with your existing buttons easily by just adding the class of "arrow"! Also includes a hover state.</p>
<a class="arrow active">Arrow</a><a class="arrow">Arrow</a><a class="arrow">Arrow</a>
</div>
</body>
</html>
<!-- end snippet -->
I've just tried to design a dropdown menu for my navigation. Unfortunately they whole nav and the dropdown is flickering now, when I hover the dropdown button in my nav. The dropdown menu also disappears, when I try to click it.
I can't give you pieces of my code, because Stackoverflow transforms it directly into HTML (don't know why), so I just can give you a link to my test page: http://keinkopf.de/designs/1/
EDIT:
HTML
<nav>
<ul>
<li>Start</li>
<li>Themen
<ul>
<br />
<li>1</li><br />
<li>2</li><br />
<li>3</li><br />
<hr /><hr />
</ul>
</li>
<li>3s</li>
</ul>
</nav>
CSS
ul li ul{
display: none;
background-color: #000000;
width: 400px;
margin-top: 40px;
float: left;
}
ul li ul li{
margin-left: 10px;
}
ul li:hover ul{
display: block; /* display the dropdown */
}
ul {
padding: 0;
list-style: none;
}
ul li ul hr{
border-color: #FFFFFF;
border-width: thin;
border-style: solid;
}
li {
display: inline;
margin-right: -1px;
}
#block1 {
background-color: #000000;
padding-top: 3px;
padding-bottom: 3px;
padding-right: 30px;
padding-left: 30px;
}
#block1:hover {
background-color: #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 29px;
padding-left: 29px;
color: #000000;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
#block2 {
background-color: #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 29px;
padding-left: 29px;
color: #000000;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
#block2:hover {
background-color: #000000;
color: #FFFFFF;
}
#block3 {
background-color: #FFFFFF;
padding-top: 2px;
padding-bottom: 2px;
padding-right: 29px;
padding-left: 29px;
color: #000000;
border-color: #000000;
border-style: solid;
border-width: 1px;
}
#block3:hover {
background-color: #000000;
color: #FFFFFF;
}
nav a {
text-decoration: none;
color: #FFFFFF;
font-family: 'Lato', Arial;
font-size: 15pt;
}
nav {
margin-top: 39px;
}
hr {
border-color: #000000;
border-width: 2px;
}
If i can recommend use position absolute so it doesnt affect other objects, and instead of margin use padding.
ul li ul{
position: absolute;
padding-top: 40px;
}
In case you want to have some free space between bar and drop down, then just add some div around that.
You have to position the 'ul' (dropdown-menu) within the 'li' (menu) absolute to the parent.
Every time you hover over your menu-item the menu gets displayed and the position of the menu-item changes. That's why it is flickering.
On top of that you should remove margin-top from your 'ul li ul' and make the listitems li inline-block instead of inline, so that the dropdown gets displayed undrneath the listitem.
i've created the codesnipped here
I believe it has somthing to do with the placement of your tabs. What i am saying is: when your mouse hovers over the tab it shows the rest of the subtabs and therefore pushes the tab off the mouse therefore closing down the menu or in your case causing blinking.
I have a simple navigation bar with an hover element.
.navip {
float: left;
text-decoration: none;
font-weight: lighter;
}
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
}
.navip > a:hover {
border-top: 3px solid blue;
}
When i hover on a, the border displays. But its taking down the text a little bit.
How i can fix this?
JsFiddle: http://jsfiddle.net/w0btkceg/
Edit: Solved it! I had to increase the height to 45 and add "border-top: 3px solid transparent" to the "navip a" class.
try to use
.navip > a:hover {
border-top: 3px solid blue;
margin-top: -3px;
}
I use this for menu:
.menu-item {
margin: 5px;
font-size: 1em;
font-weight: bold;
float: left;
border-top-style: solid;
border-top-width: 4px;
border-top-color: transparent;
}
.menu-item a {
padding: 5px 0;
text-decoration: none;
}
.menu-item-selected {
border-top-color: green;
}
.menu-item:hover {
border-top-color: green;
}
<div class="menu-item">
Test 1
</div>
<div class="menu-item menu-item-selected">
Test 2
</div>
<div class="menu-item">
Test 3
</div>
<div class="menu-item">
Test 4
</div>
Just do something like:
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
border-top: 3px solid transparent;} /* add a transparent border to the a */
.navip > a:hover {
border-top: 3px solid blue; /* Now just change the color value of the border from transparent to a color on over */
}
See working example here
Solution: Add a transparent border to the a , then add a color to it on hover. That way, the text won't move because the border existed before hover.
You could try box-sizing:border-box; this will include the border in the size of the box and is probably the most elegant solution.
Or my previous fix for this was just to have 10 padding for the normal link then padding:8px; for the hover version which had a border. Which would counter the border size.
Ok, you can declare a border-top property for the .navip > a{}, with 0 opacity on it, and then on hover, use your border color, like this one(check here)
.navip > a {
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 37px; /*readjust for the border stuff*/
border-top: 3px solid rgba(255,255,255,.0);/*or transparent*/
}
.navip > a:hover {
border-top: 3px solid blue;
}
OR you can use a negative margin-top property on hover, or top property if you can make the .navip > a to position relative, check it here:
.navip > a {
position: relative;
display: block;
color: black;
text-decoration: none;
font-size: 20px;
font-weight: lighter;
line-height: 40px;
}
.navip > a:hover {
margin-top: -3px;/*or top: -3px*/
border-top: 3px solid blue;
}
You could use a box-shadow instead of a border-top, like this:
.navip > a:hover {
box-shadow: inset 0 3px 0 0 blue;
}
More info here: MDN Box Shadow
Check out the JSfiddle showing what I am up to: http://jsfiddle.net/Amp3rsand/FPj3s/1/
HTML:
<ul id="navigation">
<li>BLAH</li>
<li>MORE <br /> BLAH</li>
<li>STILL <br /> MORE</li>
<li>YADDA <br /> YADDA</li>
<li>ETC ETC <br /> ETC ETC</li>
<li>FINISH</li>
</ul>
CSS:
body {
font-size: 12px;}
}
#navigation {
width: 600px;
height: 50px;
position: absolute;
left: 20px;
top: 25px;
}
#navigation li {
list-style-type:none;
width: 94px;
height: 40px;
display: block;
float: left;
margin: 0 5px 0 0;
text-align: center;
font-weight: bold;
background: lightgrey;
}
#navigation li:first-child {
border-top: 40px solid lightgrey;
border-left: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:first-child a {
position: relative;
top: -35px;
right: 0px
}
#navigation li:last-child {
border-top: 40px solid lightgrey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
#navigation li:last-child a {
position: relative;
top: -35px;
left: 5px;
}
#navigation li:last-child a:hover {
top: -35px;
left: 5px;
}
#navigation li a {
display: block;
height: 40px;
text-decoration: none;
color:#000;
}
#navigation li a:hover {
background: grey;
}
The lightgrey shapes are what I would like the hover to look like. Only the first and last children need to look different but I am unsure of how to go about messing with the borders on hover without ruining the layout. I have had to move the first and last 'a' elements because of the border shenanigans and now I'm stuck.
What would you suggest?
EDIT:
I just realised I could do this to change the shape of the hover bit but the link position is still causing trouble
#navigation li:last-child a:hover {
border-top: 40px solid grey;
border-right: 25px solid transparent;
height: 0;
width: 70px;
background: none;
}
See it live here on JS Fiddle
The properties you want to change are of the <li> elements so target the list items hover state and change the background and border color
#navigation li:hover {
background: grey;
}
#navigation li:first-child:hover,
#navigation li:last-child:hover{
background: none;
border-top-color: grey;
}
Updated fiddle
Essentially, you want to set the 'border-top' to grey for the first/ last child.
You could use in CSS:
#navigation li:first-child:hover {
border-top: 40px solid lightgrey;
}
But this didn't work in Google Chrome, for me, so perhaps just apply that as a hover effect using jQuery?
Small question on how to achieve some styling on a HTML / CSS UL menu.
I have a standard UL menu, but having some issues getting my head around how to achieve a certain look to the styling. The UL menu as it currently stands is shown here:
http://jsfiddle.net/WMQqt/
(HTML)
<ul id="nav">
<li>CONTACT US
</li>
<li>HOME
</li>
</ul>
(CSS)
#nav {
list-style: none;
margin-bottom: 10px;
*/ margin-top: -6px;
position: relative;
right: 286px;
z-index: 9;
height: 26px;
padding: 4px 4px 4px 4px;
font-weight: bold;
}
#nav li {
float: right;
margin-right: 10px;
}
#nav a {
display: block;
padding: 5px;
color: #444444;
background: #fff;
text-decoration: none;
border: 1px solid grey;
}
#nav a:hover {
color: #fff;
background: #04B431;
}
I'd like the menu buttons to have a small 1px border, but then some white space padding of around 3px before the background color starts.
Similar to how this looks:
http://jsfiddle.net/6PY7z/
Can this be done using the UL menu method?
Thanks for any advice, I'm no expert with HTML / CSS.
Add margin to a tag and move border to li
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey;
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #ccc;
text-decoration: none;
margin:3px;
}
DEMO
you can use the following styles to achieve what you want:
#nav li
{
float: right;
margin-right: 10px;
border: 1px solid grey; /*put original border here*/
}
#nav a
{
display: block;
padding: 5px;
color: #444444;
background: #d8d8d8; /*new background-color*/
text-decoration: none;
border: 3px solid white; /*add white padding here*/
}
http://jsfiddle.net/WMQqt/4/
ok
in html go
<dl><div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
<div><dt>F</dt><dd>T</dd></div>
</dl>
in css
dl { display: flex;
flex-direction: column;}
some hints...
dt float left AND
dd float right