I'm trying to create a mobile navigation with the :target pseudo-class. My problem is when i open the navigation the open button don't hide to get the close button visible.
This don't work -> #nav-menu:target #mobile-menu-open
This is my code:
HTML
<nav>
<ul id="nav-menu">
<li>Side A</li>
<li>Side B</li>
</ul>
</nav>
CSS
nav {
clear: both;
text-align: left;
height: 24px;
margin: auto;
position: relative;}
#nav-menu {
display: none;}
#nav-menu li {
display: block;
text-align: left;
padding: 11px 8px;
font-weight: bold;
font-size: 14px;}
#nav-menu a:link, #nav-menu a:visited {
color:#CCC;
text-decoration: none;
transition: all 0.15s ease-in-out;}
#nav-menu a:hover, #nav-menu a:visited hover {
color:#FFF;
text-decoration: none;
transition: all 0.15s ease-in-out;}
#mobile-menu-open {
display: block;}
#mobile-menu-close {
display: none;}
#mobile-menu-open, #mobile-menu-close {
width: 24px;
height: 18px;
background: url(../bilder/mobile-menu-button.png) bottom no-repeat;
margin-top: 91px;
padding-left: 9px;
opacity: 0.75;
filter: alpha(opacity=50);
transition: all 0.3s ease-in-out;}
#mobile-menu-open:hover, #mobile-menu-close:hover {
opacity: 1.0;
filter: alpha(opacity=100);}
#nav-menu:target {
display: block;
padding-top: 11px;
background: #333;}
#nav-menu:target #mobile-menu-open {
display: none;}
#nav-menu:target #mobile-menu-close {
display: block;}
OK here is an example of it
Fiddle
you need to add + to this #nav-menu:target + #mobile-menu-open
I got it :D
I just put the id="nav-menu" to the and changed the css show and hide navigation to #nav-menu ul ...
The problem was that after targeting the #nav-menu the button where outside the div ... hope my explanation is understandable ...
Greetz, Björn
Related
I am making a website: Website. In the menubar I have an underline when a specifi menu is active, or you hover over the menu options.
I would like that there is some px space from the menu text to the underline. How is that possible?
I tried to set a border-bottom:1px solid white, but that does not do the trick for me.
It is the following CSS the underline is on:
.wpmega-black-white .wpmm-mega-wrapper > li:hover,
.wpmega-black-white .wpmm-mega-wrapper > li.current-menu-item {
text-decoration: underline;
margin-top: 0.8em;
transition: all ease 0.3s;
-webkit-transition: all ease 0.3s;
-ms-transition: all ease 0.3s;
}
Edited
delete previous codes and modify your CSS as I wrote:
in your CSS files /css/style.css?ver=4.9.4 find and change these block of codes. please have a backup before modifinig
please note that you should not delete other parameters of elements, only change what I wrote.
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li > a {
padding: 20px 15px 10px 20px;
}
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal ul.wpmm-mega-wrapper > li.current-menu-item a, .wp-megamenu-main-wrapper.wpmm-orientation-vertical ul.wpmm-mega-wrapper > li.current-menu-item a{
border-bottom: 2px solid #FFF;
}
.wp-megamenu-main-wrapper.wpmm-orientation-horizontal.wpmm-askins-wrapper ul.wpmm-mega-wrapper > li.menu-item-has-children > a:after {
top: 60%;
}
add this to your own css file
.wp-mega-menu-link:hover {
border-bottom: 2px solid #FFF;
}
text-decoration does exactly what is says it does, underline the text...you can't move the location of that underline (yet). You would have to use a positioned pseudo-element on the inner span.
For example:
ul {
list-style: none;
background: #000;
}
li {
display: inline-block;
}
li>a {
color: white;
padding: 20px 15px 20px 20px;
position: relative;
display: block;
font-size: 16px;
font-weight: 400;
font-style: normal;
line-height: 1.6;
overflow: visible;
font-family: "Work Sans", Helvetica, Arial, sans-serif;
text-transform: capitalize;
text-align: left;
text-decoration: none;
}
li>a span {
position: relative;
}
li>a span::after {
content: "";
position: absolute;
bottom: -10px;
/* adjust spacing here */
left: 0;
width: 0%;
height: 1px;
transition: width .3s ease;
background: transparent;
}
li>a.current-item span::after {
background: currentcolor;
width: 100%;
}
li>a:hover span::after {
width: 100%;
background: currentcolor;
}
<ul>
<li><span>MY TEXT HERE</span></li>
<li><span>MY NEW ITEM</span></li>
</ul>
This also means they can be animated.
This question already has answers here:
CSS center ul list
(2 answers)
Closed 7 years ago.
I tried to wrap it in div, I tried bunch of different code, but I cannot make it.
I will appreciate any help.
I don't know where am I making mistake.
.menu2 {
list-style: none;
justify-content: center;
align-items: center;
}
.menu2 li {
float: left;
width: 80px;
padding: 1px;
}
.menu2 > li a {
display: block;
font-size: 0.8em;
padding: 3px;
text-decoration: none;
text-align: center;
color: #333333;
border: 1px solid #d6d6d6;
transition: all ease .5s;
}
.menu2:hover > li a {
opacity: .5;
transition: all ease .5s;
}
.menu2 > li:hover a {
opacity: 1;
color: #D2383C;
border-color: #D2383C;
}
<ul class="menu2">
<li>2014</li>
<li>2013</li>
<li>2012</li>
</ul>
float: left will left-align your list items. You can achieve a similar effect to floating by using display: inline-block instead. Then put text-align: center on your .menu2 rather than align-items.
.menu2 {
list-style: none;
text-align: center;
margin: 0;
padding: 0;
}
.menu2 li {
display: inline-block;
width: 80px;
padding: 1px;
}
.menu2 > li a {
display: block;
font-size: 0.8em;
padding: 3px;
text-decoration: none;
text-align: center;
color: #333333;
border: 1px solid #d6d6d6;
transition: all ease .5s;
}
.menu2:hover > li a {
opacity: .5;
transition: all ease .5s;
}
.menu2 > li:hover a {
opacity: 1;
color: #D2383C;
border-color: #D2383C;
}
<ul class="menu2">
<li>2014</li>
<li>2013</li>
<li>2012</li>
</ul>
Note that a caveat of display: inline-block is that whitespace between the items will produce visual space between the menu items (notice the wider gap between the items in my code snippet versus the OP's). There are several possible solutions to this:
(1) Placing all lis on the same line with no whitespace between </li><li> (but this doesn't look too good in the source
<ul class="menu2">
<li>2014</li><li>2013</li><li>2012</li>
</ul>
(2) Achieving the equivalent effect by putting the whitespace in a comment (which also looks weird), e.g.
<ul class="menu2">
<li>2014</li><!--
--><li>2013</li><!--
--><li>2012</li>
</ul>
(3) Specifying font-size: 0; on .menu2 and overriding the font-size on the .menu2 li.
You only have to style the <ul> tag with margin: auto and display: table. Note that display: table may not work well in old IE browsers (See MDN documentation).
.menu2 {
list-style: none;
margin: auto;
display: table;
padding-left: 0; /* reset the left padding of <ul> */
}
.menu2 li {
float: left;
width: 80px;
padding: 1px;
}
.menu2 > li a {
display: block;
font-size: 0.8em;
padding: 3px;
text-decoration: none;
text-align: center;
color: #333333;
border: 1px solid #d6d6d6;
transition: all ease .5s;
}
.menu2:hover > li a {
opacity: .5;
transition: all ease .5s;
}
.menu2 > li:hover a {
opacity: 1;
color: #D2383C;
border-color: #D2383C;
}
<ul class="menu2">
<li>2014</li>
<li>2013</li>
<li>2012</li>
</ul>
For modern websites, you can take the advantage of <nav> HTML tags to make menus. Example is available here.
I have menu items that must be stretched automatically in full width menu.How is the best way for any type of screen to do it automatically with css?
I tried this
.report_types_section ul li {
position: relative;
display: inline-block;
width: auto;
}.report_types_section ul li a {
float: left;
text-decoration: none;
color: #74a9d4;
font-size: 18px;
display: block;
text-align: center;
width: 100%;
padding-left: 15px;
padding-right: 35px;
text-transform: uppercase;
}.report_types_section ul li a:after {
content: " | ";
color: #74a9d4;
font-size: 18px;
float: right;
padding-left: 23px;
position: absolute;
}
But for any screen here I need to increase the padding but it is not good.
In the absence of having provided any markup- I have made a few inferences- what you wish to achieve can be used with CSS tables (in the absence of greater support for flexbox)
html,
body {
width: 100%;
margin: 0;
}
ul,
li {
padding: 0;
margin: 0;
}
.report_types_section ul {
display: table;
table-layout: fixed;
width: 100%;
}
.report_types_section ul li {
display: table-cell;
}
.report_types_section ul li:not(:last-of-type) {
border-right: 1px solid #74a9d4;
}
.report_types_section ul li a {
text-decoration: none;
color: #74a9d4;
white-space:nowrap;
font-size: 18px;
display: block;
text-align: center;
text-transform: uppercase;
}
<div class="report_types_section">
<ul>
<li>Menu Item
</li>
<li>Menu Item
</li>
<li>Menu Item
</li>
<li>Menu Item
</li>
</ul>
</div>
You can also apply white-space: nowrap; to the child a to prevent wrapping.
If you know how many items will be there, you can use columns with percentage width. For example 6 elements - 100% / 6
.report_types_section ul li {
display: inline-block;
width: 16.6%;
float: left;
}
DEMO here http://jsfiddle.net/mattydsw/hzy5Lr49/
EDIT
I have no better idea than using table layout and adding empty cells as spacing cells. I also put a pipe | in empty cells and centered it to simulate border.
http://jsfiddle.net/mattydsw/hzy5Lr49/2/
Finally I found a solution for the spaces.
Fiddle
.report_types_section ul {
list-style-type: none;
float: left;
width: 64%;
padding:0;
margin:0;
}
.report_types_section ul li:first-child {
text-align: left;
}
.report_types_section ul li {
position: relative;
line-height: 15px;
white-space: nowrap;
display: table-cell;
text-align: center;
}
.report_types_section ul li.active_tab a {
border-right: 1px solid #000;
}
.report_types_section ul li:last-child a {
padding-right: 0;
}
.report_types_section ul li:last-child a {
border-right: 0;
}
.report_types_section ul li:last-child {
text-align: right;
}
.report_types_section ul li:first-child a {
padding-left: 0;
}
.report_types_section ul li a {
float: left;
text-decoration: none;
color: #000;
font-size: 18px;
display: block;
padding: 0px 18px;
text-transform: uppercase;
-moz-transition: all .2s ease-in;
-o-transition: all .2s ease-in;
-webkit-transition: all .2s ease-in;
transition: all .2s ease-in;
border-right: 1px solid #74a9d4;
}
I'm working on a menu and having some trouble with text not appearing the way I'd like it to.
Here is a screenshot of what I'm having trouble with. There appears to be extra space below the link—the top and bottom aren't equal. There is no padding there, either. It is just a link within an <li>. What do I have wrong?
ul {
list-style-type: none;
height: 184px;
text-align: right;
padding: 0;
font-weight: 300;
}
li {
display: inline-block;
width: 50%;
text-align: left;
}
a:link, a:active {
font-size: 16px;
color: #000;
text-decoration: none;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
line-height: 2em;
}
a:hover {
background-color: #adadad;
}
a {
width: 100%;
padding: 0 0.5em;
}
<ul>
<li>Home</li>
<li>About</li>
<li>Contact Us</li>
</ul>
I see no issues. Apply your css styles to your A tag though, not the li. Also, for clarity to see what is going on, I put a border around each a tag. Check out the fiddle, everything looks fine to me. Height in DIV's is automatic if you don't set it statically. i.e., it all looks fine, I see no extra spacing with the CSS I provided below.
http://jsfiddle.net/4dbuuuq4/
CSS
ul {
list-style-type: none;
height: 184px;
padding: 0;
font-weight: 300;
}
li a {
display: inline-block;
width: 50%;
text-align: left;
border:solid 1px #ccc;
}
li a:hover{
cursor:pointer;
background-color:#ccc;
color:#fff;
}
a:link,
a:active {
font-size: 16px;
color: #000;
text-decoration: none;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
a {
width: 100%;
padding: 0 0.5em;
}
You can use display: table-cell instead of inline-block and use height instead of line-height on a:
ul {
list-style-type: none;
height: 184px;
text-align: right;
padding: 0;
font-weight: 300;
}
li {
display: inline-block;
width: 50%;
text-align: left;
}
a:link,
a:active {
font-size: 16px;
color: #000;
text-decoration: none;
-webkit-transition: background-color 0.3s, border-color 0.3s;
transition: background-color 0.3s, border-color 0.3s;
}
a:hover {
background-color: #adadad;
}
ul li a {
width: 100%;
padding: 0 0.5em;
display: table-cell;
vertical-align: middle;
height: 2em;
}
<ul>
<li>Home
</li>
<li>About
</li>
<li>Contact Us
</li>
</ul>
JSFiddle: http://jsfiddle.net/x6bM3/
If you hover over the products link you will see i have created a drop down effect, but what im trying to do is give it a nice transition instead of it just appearing.
I have tried using :hover with the css transitions on various parts of the menu, but after researching it i realised the animation wont work with display: none; on it. Please help,
Thanks in advance,
Adam
CSS:
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
}
nav ul {
list-style: none;
position: relative;
display: inline-table;
margin-top: 23px;
padding: 0;
float: left;
}
nav ul:after {
content:"";
display: block;
}
nav ul li {
float: left;
height: 50px;
width: auto;
padding: 5px;
margin-left: 22px;
}
nav ul li a {
display: block;
text-decoration: none;
}
nav ul ul {
background: #363c43;
border-radius: 3px;
border: 1px solid #2e363f;
padding: 7px;
position: absolute;
font-size: 0.9em;
}
nav ul ul:before {
content:'';
display:block;
width:0;
height:0;
position:absolute;
border-right: 7px solid transparent;
border-left: 7px solid transparent;
border-bottom:10px solid #363c43;
top:-8px;
left: 30px;
}
nav ul ul li {
height: 30px;
float: none;
position: relative;
padding: 0px 0px 5px 0px;
margin: 0px;
}
/* Other base styles */
* {
font-family: arial;
}
a:link, a:visited {
color: #979797;
font-size: 1.145em;
/* 18px */
text-decoration: none;
font-weight: lighter;
-webkit-transition: all .25s linear;
transition: color .25s linear;
}
a:hover {
color: #c4c1c1;
font-size: 1.145em;
/* 22px */
text-decoration: none;
}
HTML:
<nav>
<ul class="menu">
<li>home
</li>
<li>products
<ul>
<li>product 1
</li>
<li>product 2
</li>
</ul>
</li>
<li>solutions
</li>
</ul>
</nav>
I can explain in detail, but this person does a great job: https://stackoverflow.com/a/3332179/363605
nav ul ul {
display: block;
-webkit-transition: opacity 1s ease-in;
-moz-transition: opacity 1s ease-in;
-o-transition: opacity 1s ease-in;
transition: opacity 1s ease-in;
opacity: 0;
height: 0;
overflow: hidden;
}
nav ul li:hover > ul {
height: auto;
opacity: 1;
}
http://jsfiddle.net/pYhrk/