What I'm trying to create is a toggle that's workable without using JavaScript or jQuery. The main issue that I'm having is with getting the toggle text to switch from Open to Close when :target is applied on the #menu selector. The navigation is collapsed by default and is opened by #menu toggle.
HTML
<nav class="site-nav" id="menu">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</nav>
<section class="site-nav__toggle">
<a class="site-nav__toggle--open" href="#menu">Open</a>
<a class="site-nav__toggle--close" href="">Close</a>
</section>
CSS via SCSS
.site-nav {
border-bottom: 4px solid black;
float: left;
height: 0;
overflow: hidden;
width: 100%;
&:target {
height: 100%;
min-height: 170px;
transition: height .25s ease, min-height .25s ease;
}
}
.site-nav__toggle--open > .site-nav:target,
.site-nav__toggle--close > .site-nav {
display: none;
}
.site-nav__toggle--close > .site-nav:target,
.site-nav__toggle--open > .site-nav {
display: inline;
}
The main problem I have is that the text is not switching on the target states. Maybe a 2nd pair of eyes would help and spot the obvious if I've missed anything in this particular problem.
From W3C:
div > p
Selects all P elements where the parent is a DIV element
div + p
Selects all P elements that are placed immediately after DIV elements
I think your selectors should look like
.site-nav:target + .site-nav__toggle .site-nav__toggle--open,
.site-nav + .site-nav__toggle .site-nav__toggle--close {
display: none;
}
.site-nav:target + .site-nav__toggle .site-nav__toggle--close,
.site-nav + .site-nav__toggle .site-nav__toggle--open {
display: inline;
}
Check this codepen:
http://codepen.io/anon/pen/goAIu
Best,
Marek
Related
It is possible to inline part of a list with flex box? Here is what I have tried...
The HTML
<ul>
<li>Connect With Me</li>
<li>Facebook</li>
<li>Twitter</li>
<li>LinkedIn</li>
</ul>
The CSS
ul {
display: flex;
flex-direction: column;
}
/*obviously does not work, but hopefully gets my point across*/
ul li:not(:first-child) {
flex-direction:row;
}
So the end result is
Connect With Me
Facebook Twitter LinkedIn
You can use flex wrapping to do this. Setting the first list element to 100% width and enabling wrapping causes it to fill the full top line and wrap the other elements down below. Then, setting the remaining list elements as flex: 1; makes them all share the remaining space evenly between them.
Below is a snippet, along with a CodePen demonstrating this behaviour.
ul {
display: flex;
flex-wrap: wrap;
/* just to make it look cleaner */
list-style-type: none;
margin: 0;
padding: 0;
}
li:first-of-type {
width: 100%;
}
li:not(:first-of-type) {
flex: 1;
}
<!-- background just on li's so they stand out -->
<ul>
<li style="background: red;">Connect With Me</li>
<li style="background: aqua;">Facebook</li>
<li style="background: green;">Twitter</li>
<li style="background: yellow;">LinkedIn</li>
</ul>
CodePen: https://codepen.io/Kxrl/pen/zYBvZmw
I'm trying to adapt this jsfiddle to work without radio button since I cannot use any <form> related tags, and neither javascript!
I "transformed" the <input type='radio'> into <a> tags, and transform the :checked pseudo class into :target
as you can see in this CodePen.
but it does not work :-(
And also solution I used to show first Tab is not usable
Can suggest what's wrong?
Thanks
Joe
Alright, using the :target pseudo-class we can achieve this.
EDIT: I added a wrapper div so you can use position absolute on the panels. This allows you to have the first panel open and switch between them.
.wrapper {
position: relative;
}
.tab-container {
display: none;
position: absolute;
top: 0;
left: 0;
background: red;
}
.tab-container:first-child { display: block }
:target { display: block }
/* just for demo */
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
display: inline-block;
margin-right: 1rem;
}
<ul>
<li>Tab 1</li>
<li>Tab 2</li>
<li>Tab 3</li>
</ul>
<div class="wrapper">
<div id="tab-1-container" class="tab-container">
Tab 1 content
</div>
<div id="tab-2-container" class="tab-container">
Tab 2 content
</div>
<div id="tab-3-container" class="tab-container">
Tab 3 content
</div>
</div>
I'm trying to make a vertical navigation that is in a skewed parent div. My goal is to have all the list items follow the same path as the edge of the parent div, I'm not quite certain how to go about it.
I typed up a sample in codepen showing the default behaviour.
http://codepen.io/anon/pen/YWYQmd
<div class="parent">
<ul class="navigation">
<li><a>text</a></li>
<li><a>text</a></li>
<li><a>menu</a>
<ul class="submenu">
<li><a>text</a></li>
<li><a>text</a></li>
<li><a>menu</a>
<ul class="submenu">
<li><a>text</a></li>
<li><a>text</a></li>
</ul>
</li>
</ul>
</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
</div>
.parent {
background: rgba(123,23,55,0.2);
width: 500px;
text-align: right;
transform: skew(-20deg);
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
li {
transform: skew(20deg);
}
.submenu{
transform: skew(-20deg);
}
Any tips to make it line up like I want? Thanks!
The issue comes from 'unskewing' the li elements: in the case the li element has another ul, then the whole block becomes unskewed.
What you need to do is 'unskew' only the content of the li, not the li itself. Assuming all your text will be within an a tag, then just replace your 'unskew' with:
li a{
display: inline-block;
transform: skew(20deg);
}
See result here: http://codepen.io/anon/pen/VjyzYq
Question: How do I get this to work for tabbing, using CSS only? (Tabbing already works).
#menu:before {
content:"Menu \25bc";
font-weight:bold;
width:100%;
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu li {
position:absolute;
left:-9999px;
}
#menu:hover li {
position:relative;
left:0;
}
<html>
<title>Test</title>
<body>
<header>
Link to homepage
</header>
<nav>
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
</nav>
<main>
<p>Other text with maybe a link here.</p>
</main>
</body>
</html>
EDIT: Original question follows.
I have a menu:
<ul id="menu">
<li>Menu item 1</li>
<li>Menu item 2</li>
</ul>
However, I want to hide it at a narrow page width, so I apply the following CSS:
#media (max-width: 768px) {
#menu:before {
content:"Menu \25bc";
}
#menu:hover:before {
content:"Menu \25b2";
}
#menu a {
position:absolute;
left:-9999px;
}
#menu:hover a {
position:relative;
left:0px;
}
}
This hides the menu, adds the word "Menu" in it's place, with a down or up arrow, depending on the hover state, which also shows the menu when you hover over it.
The problem is that, while :hover works just fine, I cannot get both to show by tabbing to one of the tags, using the :focus pseudo class. (Alas, :root will not work like other pseudo classes, so something like #menu a:focus:root #menu a { position:relative; left:0; } won't work, as far as I can see).
Does anyone have any ideas as to how I could approach this, using only CSS? Or have I dug myself into a hole?
Based on OP comment below:
I'm happy to change the HTML, but how would :target work here?
here is a snippet with :target
nav {
height: 0;
overflow: hidden;
position: relative;
}
nav:target {
height: auto;
}
nav + div a:before {
content: "Menu \25bc";
font-weight: bold;
width: 100%;
}
nav:target + div a:before {
content: "Menu \25b2";
}
nav:target + div .open,
nav + div .close {
display: none;
}
nav:target + div .close,
nav + div .open {
display: block;
position: absolute;
top: 0
}
<nav id="menu">
<ul>
<li>Menu item 1
</li>
<li>Menu item 2
</li>
</ul>
</nav>
<div>
<a class="open" href="#menu"></a>
<a class="close" href="#"></a>
</div>
When trying to add an box with content inside it on a menu on a hover "drop down menu", it does something like this:
(source: gyazo.com)
I want the drop down to popup when I hover on the categories menu item.
This is the code I used for it:
<div class="secondheader">
<div class="container">
<div class="span12">
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories </li>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</div>
</div>
</div>
</div>
The CSS:
.secondheader {
background-image: url("../img/second.png");
width: 100%;
height: 66px;
border-bottom: solid 6px #f0e8ce;
}
.nav6 {
list-style: none;
font-family: 'Dosis', sans-serif;
float: left
font-size: 20px;
margin-top: 13px;
margin-left: -35px;
}
.nav6 li {
display: inline;
margin: 0px;
font-size: 18px;
font-family: 'Dosis', sans-serif;
float: left;
margin-top: 10px;
}
.nav6 a {
color: #7d7253;
padding-top: 20px;
padding-bottom: 20px;
padding-left: 20px;
padding-right: 20px;
}
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410f;
text-decoration: none;
}
I've tried using tutorials but I don't really understand on how to make the same thing for my layout I mean it has different ways and classes.
Do you want something like http://jsfiddle.net/b76Qc/?
Edit:
In your case the submenu is horizontal because you use descendant selectors instead of child selectors:
replace .nav6 li with .nav6>li and .nav6 li ul with .nav6>li>ul
See my jsfiddle if you want the complete code.
Edit 2:
If you want each element to have a different background,
<li class="dropdown1">Categories
<ul>
<li style="background:red">Buy</li>
<li style="background:blue">Sell</li>
<li style="background:green">Forums</li>
...
</ul>
</li>
But can you provide a link to your site instead of images? The square shown in http://gyazo.com/35835f003d0d8b776248196632cc1d4a.png is weird, but I can't know what's happening just with images...
Edit 3:
You have to change
.nav6 a {
color: #7D7253;
padding: 20px;
}
into
.nav6>li>a {
padding: 20px;
}
.nav6 a {
color: #7D7253;
}
And
.nav6 a:hover {
background-image: url("../img/hoverbg.png");
color: #53410F;
text-decoration: none;
}
into
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
.nav6 > li > a:hover {
background-image: url("../img/hoverbg.png");
}
Edit 4:
Sorry I didn't explain why I was telling you to use selectors with >, I thought you knew it.
Your html is like this:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
<li>Forums</li>
<li>Contact</li>
<li>item 1</li>
</ul>
</li>
</ul>
If you use .nav6 a, the style will be applied to all <a> inside .nav6. That's a descendant selector.
Then, this will be applied both to menu's links and submenu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
But if you use a child selector like .nav6>li>a, the style is applied only to the links which are childs of a <li> which is a child of .nav6 (only menu's links). This way we can set which styles we want to apply to all links and which to menu's links:
<ul class="nav6">
<li>Home</li>
<li class="dropdown1">Categories
<ul>
<li>Buy</li>
<li>Sell</li>
...
</ul>
</li>
</ul>
Edit 5:
To fix the problem with backgrounds,
change
.nav6 a:hover {
color: #53410F;
text-decoration: none;
}
to
.nav6>li:hover>a, .nav6 .dropdown1 li:hover>a {
color: #53410F;
text-decoration: none;
}
and
.nav6 > li > a:hover
background-image: url("../img/hoverbg.png");
}
to
.nav6>li:hover>a {
background-image: url("../img/hoverbg.png");
}
To show you how little code is actualy required to make this work i set up a small example here: http://jsfiddle.net/fS5WV/
I put the explanations in the css.
The key lies in nesting the menu's properly, and giving the submenus a position absolute to prevent them from pushing the content down.
I hope it makes sense. Feel free to ask if you need further explanation.