I have two divs. When I rollover on a link, I want to hide one div and show the other so it appears as if the background color has changed. Here is some example HTML:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div id="sub-nav">
<ul>
<li>SubItem 1</li>
<li>SubItem 2</li>
<li>SubItem 3</li>
</ul>
</div>
The sub-nav div is EXACTLY the same as the main-nav div, except the background-color is different.
#main-nav {
width: 500px;
height: 250px;
background-color: black;
display: block;
}
#sub-nav {
width: 500px;
height: 250px;
background-color: white;
display: none;
}
All I want to do is show the #sub-nav div whenever an item in the #main-div is hovered over. So the effect will be that the background-color appears to change from black to white on hover.
Can I do this using only CSS?
Basically I am wanting to know if I can change the display property of a containing div whenever an element inside that div (the <a> tag) is hovered over? That is, hovering on a link should cause its containing div #main-nav to change to display: none and the #sub-nav div to become display:block
No you can't do this just with CSS. You would need the subnav to be a child of the element you are hovering or directly adjacent to it.
You could use css selectors like
#main-nav li:hover .sub-nav{}
or
#main-nav li:hover + .sub-nav{}
Alternatively you could use javascript
Why not just change the background color? Like this:
<div id="main-nav">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
#main-nav:hover { background-color: black; }
Edit you can do exactly what you asked, but you'd need a wrapper for that:
<div class="navigation-wrapper">
<div class="main">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class="sub">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
</div>
And in your css:
.navigation-wrapper .sub { display: none; }
.navigation-wrapper:hover .main { display: none; }
.navigation-wrapper:hover .sub { display: block; }
Fiddle demo
Related
I am trying to cater for line breaks in a list so that the bullet points are used more like separators instead, I have this so far...
ul {
margin:auto;
max-width:280px;
list-style:none;
text-align:center;
}
li::before {
content: "•";
color: red;
}
li {
display:inline;
}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
How can I make sure that list items aren't split between lines and also make sure that bullet points only display if it isn't a new line?
I am try to make things look like this...
The width of the container and the number of items does change so trying to do this without assigning individual classes
A couple of techniques will help you achieve this effect.
1st use first-child on the list element to hide the first separator.
The second is a little hacky but it's the way to hide the bullet when the menu rows wrap; Use a pseudo-element on the ul to create an overlay to hide the first bullet in the second row.
If you want to align the bottom row to the middle you're going to want to use flexbox, with justify-content:center and move your bullet to the right after each element. Move the ul overlay to the right and hide the bullet of the last-child instead of the first-child.
ul{margin:auto;max-width:300px;list-style:none;text-align:center; position:relative; overflow:hidden;padding-left:0; display:flex; flex-wrap:wrap; justify-content: center; }
ul:before {content:" "; height: 100%; position:absolute; right:0; width:0.75rem; background-color: #fff; z-index:2; }
ul> li{display:inline; padding:0 0.5rem; position:relative;}
ul > li:before {position:absolute; right:0; transform:translateX(50%); content: "•"; color: red;}
ul > li:last-child:before{ display:none;}
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
<li>Item 6</li>
<li>Item 7</li>
<li>Item 8</li>
</ul>
How would you make all of the <li> items in a <ul> element to be displayed in a line, and how would you center that entire list on the page? You must apply your CSS directly to the <ul> element itself, you cannot use a parent element.
I tried with display:inline-flex but then you can't align the <li> items in center so any possible way to do this?
Here is my Fiddle but I cannot align the <li> in center as :
https://jsfiddle.net/pymg30yr/
The problem with inline-flex is that your ul will take the width of its content so you cannot center the items inside (as there is no space either side)
In order to fix this, just make the ul flex and then add justify-content:center:
ul {
padding:0;
margin:0;
display: flex;
list-style: none;
justify-content:center;
}
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
<li>Link 6</li>
<li>Link 7</li>
<li>Link 8</li>
<li>Link 9</li>
<li>Link 10</li>
</ul>
html
<ul>
<li>a list item </li>
<li>a loooooooooooooooooooong list item </li>
<li>another list item</li>
</ul>
css
ul {
display: table;
margin: 0 auto;
}
li {
float: left;
margin: 0 10px;
list-style-type: none;
}
demo
http://jsfiddle.net/fNFYr/467/
What I am trying to do is:
Assume that I have the following list:
Item 1
Item 2
Item 3
Item 4
I want to alternate between two colours so for example:
Item 1 (Blue)
Item 2 (Orange)
Item 3 (Blue)
Item 4 (Orange)
But I want this behaviour to be controlled in CSS so I can just write:
<ul>
<li>Item 1</li>
</ul>
Can anyone point me in the right direction to how I would achieve this?
You can use :nth-child pseudo class:
ul li:nth-child(2n+1) { color: blue; }
ul li:nth-child(2n) { color: orange; }
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
You can use CSS :nth-child
li { color: blue; }
li:nth-child(odd) { color: orange; }
JSFiddle Code
I'm trying to achieve a shopping menu in my html code,
Here is the simple piece of html I am working with so far
<html>
<head>
<style>
.category-list
{
width: 300px;
background-color: #CCC;
}
body {background-image: url("images/background.gif");}
</style>
</head>
<body>
<div class="category-list">
<ul>
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul>
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
<ul>
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul>
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
</body>
</html>
If you take a look at the image below,
The image on the left is what is displaying at the moment,
the image in the middle is what I would like my menu to look like,
The image on the right is just a template to show you what I mean.
So basically the first UL will display, the second UL will display, in one row, then the third UL will be drawn just below the first UL, and then the fourth UL will be drawn below the second UL.
Add this to your CSS:
ul:nth-child(2n-1) {
float:left;
margin: 0;
}
ul:nth-child(2n) {
margin-left: 150px; /* Or how many px you want */
}
JSFiddle
You can try float left and float right, so
<ul class="columnLeft"> 1. ....</ul>
<ul class="columnRight"> 2. ....</ul>
<ul class="columnLeft"> 3. ....</ul>
<ul class="columnRight"> 4. ....</ul>
with stylesheet
columnLeft { float: left;}
columnRight { float: right;}
At your picture, the first UL and the second UL have different heights and the preceding ULs are directly sticked to the bottom of the upper one.
This is why you may create "columns" by classing-left/right.
Or use this sample
<style>
.category-list{
width: 300px;
background-color: #CCC;
}
body {
background-image: url("images/background.gif");
}
.red{
border: solid 1px red;
}
.green{
border: solid 1px green;
}
.blue{
border: solid 1px blue;
}
.yellow{
border: solid 1px yellow;
}
.left{
float: left;
}
.right{
float: right;
}
</style>
<div class="category-list">
<div class="left">
<ul class="red">
<li>Item 1-1</li>
<li>Item 1-2</li>
<li>Item 1-3</li>
</ul>
<ul class="green">
<li>Item 2-1</li>
<li>Item 2-2</li>
<li>Item 2-3</li>
<li>Item 2-4</li>
<li>Item 2-5</li>
</ul>
</div>
<div class="right">
<ul class="blue">
<li>Item 3-1</li>
<li>Item 3-2</li>
</ul>
<ul class="yellow">
<li>Item 4-1</li>
<li>Item 4-2</li>
<li>Item 4-3</li>
</ul>
</div>
firstly float your <ul>'s
give them a width e.g. width: 50%; for two columns, width: 33% for 3 columns
finally clear the outer div category-list so that your layout is maintained and doesn't messup the rest of the page.
here it is in its entirety:
.category-list:after{
clear: both;
display:block;
content: '';
}
.category-list ul{
float:left;
width: 50%
}
Is it possible somehow achieve to display LI tags from one UL in multiple columns?
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
I now I can get it with nested ul tags, but if is it possible it would be great! Even when some li tags would be used to separate columns, but I don't know how to style it.
Add a wrapper around your UL and use the new CSS3 "columns":
<div class="columns">
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
And then style with CSS:
.columns {
-moz-column-count: 3;
-moz-column-gap: 1em;
-webkit-column-count: 3;
-webkit-column-gap: 1em;
}
Here's a jsFiddle: http://jsfiddle.net/NEHwE/
It is possible to have them floating left, and clearing them every n items. This would simulate a fixed amount of columns, and work in IE9+ and all the other browsers
li{
float: left;
}
li:nth-child(4n+1){ /*replace 4 with the number of columns*/
clear: left;
}
JSFiddle
The old fashion way.
the css style:
.ul li { float: left; margin-right: 20px; }
and the implementation:
<div class="ul">
<ul>
<li>Col 1</li>
<li>Col 2</li>
<li>Col 3</li>
<li>Col 4</li>
</ul>
</div>