I have a list of blocks I want to display in multiple columns (at least 2 columns).
In my blocks I have a header with a title and a svg icon.
If I use the css property "column-count" to split content in columns, some svg disapear on Google Chrome. (no problem with Firefox)
Here is a demo :
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
}
.block header svg {
width: 15px;
height: 15px;
margin-right: 0.5em;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}
<section>
<h1>First block without columns</h1>
<div class='container'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</section>
</div>
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-capacity" viewBox="0 0 17.293 20">
<path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path>
</symbol>
</svg>
Does anyone have an idea how to fix this?
Regards
I had the exact same problem and finally after searching for a while, the following made Chrome render my SVGs correctly:
-webkit-backface-visibility: hidden;
In your code above if you add the following, it works:
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
-webkit-backface-visibility: hidden;
}
It's for sure a bug but here is a different code using the SVG as background to achieve the same without the bug:
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 18px;
border-bottom: 1px solid grey;
background:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17.293 20" width="15"> <path d="M2674.323,1341a2.012,2.012,0,1,0-1.437-.575,2,2,0,0,0,1.437.575Zm1.52,1h-3.053a2.012,2.012,0,0,0-2.027,2v5.494h1.52V1357h4.067v-7.507h1.533V1344a2.022,2.022,0,0,0-2.039-2Zm-11.693-1a2,2,0,1,0-2.027-2,2.023,2.023,0,0,0,2.027,2Zm1.52,1h-3.04a2.015,2.015,0,0,0-2.04,2v5.493h1.533V1357h4.067v-7.507h1.52V1344a2.015,2.015,0,0,0-2.04-2Z" transform="translate(-2660.59 -1337)"></path></svg>') left top 0.5em/15px 15px no-repeat;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}
<section>
<h1>First block without columns</h1>
<div class='container'>
<div class='block'>
<header>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</section>
</div>
There is an error in your markup where you are closing the section before closing the last block. Still this is not fixing the problem.
This probably is a bug. In order to make it work I've removed the transformation and recalculated the d attribute.
section {
width: 500px;
margin-right: 100px;
float: left;
}
.container {
border: 1px solid black;
margin: 0 auto;
padding: 0.25em;
margin-top: 1.25em;
}
.container.withcolumns {
column-count: 2;
column-gap: 2em;
}
.block {
break-inside: avoid-column;
}
.block header {
font-weight: bold;
padding: 0.5em 0;
border-bottom: 1px solid grey;
}
.block header svg {
width: 15px;
height: 15px;
margin-right: 0.5em;
}
ul,
li {
margin: 0;
padding: 0;
list-style-type: none;
}
li {
margin: 0.25em 0;
}
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
<symbol id="svg-capacity" viewBox="0 0 17.293 20">
<path d="M13.73,4a2.012,2.012,0,1,0,-1.437,-0.575a2,2,0,0,0,1.437,0.575zm1.52,1h-3.053a2.012,2.012,0,0,0,-2.027,2v5.494h1.52v7.506h4.067v-7.507h1.533v-5.493a2.022,2.022,0,0,0,-2.039,-2zm-11.693,-1a2,2,0,1,0,-2.027,-2a2.023,2.023,0,0,0,2.027,2zm1.52,1h-3.04a2.015,2.015,0,0,0,-2.04,2v5.493h1.533v7.507h4.067v-7.507h1.52v-5.493a2.015,2.015,0,0,0,-2.04,-2z" ></path>
</symbol>
</svg>
<section>
<h1>Same code with columns</h1>
<div class='container withcolumns'>
<div class='block'>
<header>
<svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>
Block 1</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 2</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 3</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</div>
<div class='block'>
<header><svg><use href="#svg-capacity" xlink:href="#svg-capacity"></use></svg>Block 4</header>
<ul>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>
</div>
</div>
</section>
I am having dropdowns in a menu that has horizontal scrolling on mobile resolution.
As you can see in the example the desktop version is able to display the dropdowns when the menu is hovered, however, when using the mobile version that uses overflow-y: hidden the dropdown is obscured.
I have attempted to change the overflow-y to all available options, I would have thought setting it to visible would allow the dropdown to be seen however, this is not the case.
I'm open to anything at this point, I'm about to use position fixed and set it with javascript but I would prefer not to if there is a better solution in css.
I need to leave the horizontal scrolling of the top level menu items.
Thanks for any help.
body {
background: #eee;
font-family: sans-serif;
}
.main.mobile {
max-width: 250px;
}
.main {
max-width: 700px;
margin: 0 auto;
background: white;
}
.mobile .nav {
overflow-x: scroll;
overflow-y: hidden;
}
.list {
display: flex;
list-style-type: none;
padding: 0;
margin: 0;
}
.list__item {
padding: 1em;
white-space: nowrap;
position: relative;
transition: .2s all;
}
.list__item:hover {
background: #dc205c;
}
.list__item:hover .dropdown {
visibility: visible;
opacity: 1;
}
.dropdown {
visibility: hidden;
opacity: 0;
transition: .4s all;
position: absolute;
list-style-type: none;
top: 100%;
padding: 0;
left: 0;
background: white;
}
.dropdown__item {
padding: 1em;
transition: .2s all;
}
.dropdown__item:hover {
background: #dc205c;
}
<main class="main mobile">
<header class="header">
<nav class="nav">
<ul class="list">
<li class="list__item">
<span>item 1</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>longer item 2</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 3</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 4</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
<main class="main">
<header class="header">
<nav class="nav">
<ul class="list">
<li class="list__item">
<span>item 1</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>longer item 2</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 3</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
<li class="list__item">
<span>item 4</span>
<ul class="dropdown">
<li class="dropdown__item">item 1</li>
<li class="dropdown__item">item 2</li>
<li class="dropdown__item">item 3</li>
</ul>
</li>
</ul>
</nav>
</header>
</main>
How to make a display of three columns as one submenu while hovering each menu.
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</ul>
</li>
</ul>
</div>
</div>
</div>
I want to make the menu like this below image
Please see below. Hope this helps.
$('.vertical-nav li a').mouseover(function() {
$(this).parent().find('.sub-menu').show();
})
.mouseout(function() {
$(this).parent().find('.sub-menu').hide();
});
.sub-menu {
display:none;
}
.vertical-nav li, .sub-menu li {
list-style:none;
}
.column {
float:left;
width: 100px;
}
.title {
padding-bottom: 10px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="row">
<div class="col-sm-4">
<ul class="vertical-nav">
<li>Link 1</li>
<li>Link 2
<ul class="sub-menu">
<div class='column'>
<li class='title'>Style</li>
<li>Sub Link 1</li>
<li>Sub Link 2</li>
</div>
<div class='column'>
<li class='title'>Subject</li>
<li>Sub Link 3</li>
<li>Sub Link 4</li>
</div>
<div class='column'>
<li class='title'>Medium</li>
<li>Sub Link 5</li>
<li>Sub Link 6</li>
</div>
</ul>
</li>
</ul>
</div>
</div>
</div>
I've never had a problem so hard as this, I can't even get started so I don't have a very good fiddle to show you, only the source code and what I'm trying to achieve.
I need a three level UL. The top level being inline - for top level navigation. The sub UL's and LI's will be inline-block - more or less.
Here's an image of what I mean: http://www.smileycat.com/miaow/archives/images/megamenus/ea.gif
I need something similar to this, kind of like a mega drop down I suppose? Can anyone help or point me in the right direction?
JSFiddle: http://jsfiddle.net/RVQ6m/
Some code:
<ul class="level1">
<li class="level1">top
<ul class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li class="level2">
<li class="level2">middle
<ul class="level3">
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
<li class="level3">bottom</li>
</ul>
</li>
</ul>
</li>
</ul>
Well,
for one I think your doing this all wrong and you need to look at it a different way. From the image example you provided this seems more like a div showing and hiding content as apposed to a bunch of nested Unordered list. Also, I'm not sure what script you would like to use in order to achieve the effect you are looking for. For simplicity sake. I started you off by creating a Div that you can show and hide using JavaScript or a library of your choice. All you need to do now is find a script that will toggle (show and hide the div on mouseover) Note: the Div #games-display should not be displayed when a user lands on the page.
http://jsfiddle.net/jimmyt1001/Bz9QA/
First Your CSS
<style type="text/css">
.nav-container {
font-family: Arial, Helvetica, sans-serif;
font-size: 0.8em;
}
div.column {
border-left: 2px #dedede solid;
width:156px;
float:left;
padding: 11px 25px 5px 11px;
}
div.column:nth-child(1)
{
border-left:none;
}
.column a {
line-height:1.7em;
}
ul {
color:#3173d4;
}
.column.highlight a {
color:#3173d4;
font-weight:bold;
}
.clear-fix {
clear:both;
}
#games-display {
width:580px;
height:273px;
border-top: 6px #639df4 solid;
border-right: 1px #639df4 solid;
border-left: 1px #639df4 solid;
border-bottom: 1px #639df4 solid;
background-color:#fff;
-webkit-border-bottom-right-radius: 10px;
-webkit-border-bottom-left-radius: 10px;
-moz-border-radius-bottomright: 10px;
-moz-border-radius-bottomleft: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
padding:10px;
}
.display-header {
width:135px;
height:5px;
background-color:#f7f7f7;
font-weight:bold;
padding:8px 5px 15px 15px;
border: 1px #c5c5c5 solid;
}
.featured {
width:135px;
height:125px;
background-color:#f7f7f7;
text-align:center;
font-weight:bold;
padding:12px;
border: 1px #c5c5c5 solid;
}
</style>
And then your HTML
<div class="nav-container">
Nav Link
<div id="games-display">
<div class="column highlight">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
</ul>
<div class="featured">
Featured Info
</div>
</div>
<div class="column">
<div class="display-header">Column 2</div>
<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>
</ul>
</div>
<div class="column">
<div class="display-header">Column 3</div>
<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>
</ul>
</div>
<div class="clear-fix"></div> <!-- Very dirty way of removing float property -->
</div>
</div>
I want to create a top header with the logo in the center and navigation options to it's left and right.
Below is what I have so far but not sure how to take it form there. What can I do to accomplish this?
<div class="header">
<div class="nav">
<ul>
<li>Option 1</li>
<li>Option 2</li>
<li>Option 3</li>
<li>Option 4</li>
<img class="logo_home" src="logo.png" height="100">
<li>Option 5</li>
<li>Option 6</li>
<li>Option 7</li>
<li>Option 8</li>
</ul>
</div>
</div>
CSS:
ul {
list-style:none;
}
li {
display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
top: 0;
left: 0;
position:absolute;
}
.logo_home {
display:block;
margin-left:auto;
margin-right:auto;
}
Here is a fiddle about what i think you are trying to achieve.
Change the li inline to float , and now the ul needs to be modified to your needs, so it can be centered.
here is another fiddle which i think is exactly what you are trying to achieve.
you just need to remove the display:block to the image and add text-align:center to the ul.
like this the elements are in the center.
So here is the html
<div class="header">
<div class="nav">
<ul>
<li href="#">Option 1</li>
<li href="#">Option 2</li>
<li href="#">Option 3</li>
<li href="#">Option 4</li>
<li><img class="logo_home" src="logo.png" height="100" /></li>
<li href="#">Option 5</li>
<li href="#">Option 6</li>
<li href="#">Option 7</li>
<li href="#">Option 8</li>
</ul>
</div>
</div>
and here is your css
ul {
list-style:none;
text-align:center;/* this will center your items*/
}
li {
margin: 0 5px;
display:inline;
}
.header {
background-color: #999;
width: 100%;
height: 80px;
}
.logo_home {
margin-left:auto;
margin-right:auto;
/*removed display:block*/
}
I changed display: inline from li to float: left and wrapped the img in the li tag. Looks like it is what you are looking for: FIDDLE
That is to go further. I would divide left and right to two classes, also place links.
.logo_home img{
margin:0 auto;
}
.navleft {
float: left;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
.navleft li {
float: left;
padding: 5px 5px 5px 5px;
}
.navright {
float: right;
width: 500px;
height: 90px;
margin: 0 auto;
padding: 0;
}
.navright li {
float: left;
padding: 5px 5px 5px 5px;
}
</style>
</head>
<body>
<div class="header">
<ul>
<div class="navleft">
<li><a href="#">Option 1</li>
<li><a href="#">Option 2</li>
<li><a href="#">Option 3</li>
<li><a href="#">Option 4</li>
</div>
<img class="logo_home" src="logo.png" height="100">
<div class="navright">
<li><a href="#">Option 5</li>
<li><a href="#">Option 6</li>
<li><a href="#">Option 7</li>
<li><a href="#">Option 8</li>
</ul>
</div>
</div>
Something like this would do it-
.left-li {
float:left;
}
img {
float:left;
}
.right-li {
float:left;
}
Here's the HTML
<div class="header">
<div class="nav">
<ul class="left-li">
<li href="#">Option 1</li>
<li href="#">Option 2</li>
<li href="#">Option 3</li>
<li href="#">Option 4</li>
</ul>
<img class="logo_home" src="logo.png" height="100">
<ul class="right-li">
<li href="#">Option 5</li>
<li href="#">Option 6</li>
<li href="#">Option 7</li>
<li href="#">Option 8</li>
</ul>
</div>
I think this is what you want:
http://jsfiddle.net/VWcVw/
Setting everything to display: inline and putting the image in an <li> tag.
EDIT: Here's a better version, with the links on either side of the logo stacking horizontally. http://jsfiddle.net/VWcVw/1/