In bootstrap, it is as simple as:
<ul class="list-inline">
<li>...</li>
</ul>
I'm wondering how can it be done materializecss without using <nav> ?
Alternativey, you can just copy the bootstrap style:
.list-inline {
padding-left: 0;
margin-left: -5px;
list-style: none;
}
.list-inline > li {
display: inline-block;
padding-right: 5px;
padding-left: 5px;
}
<ul class="list-inline">
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
</ul>
<div class="categories-container pin-top" style="top: 0px;">
<ul class="categories db">
<li class="k">All</li>
<li>Polygon</li>
<li>Big Bang</li>
<li>Sacred Geometry</li>
</ul>
</div>
here you go -> https://themes.materializecss.com/pages/demo
also you can use class .row
Related
I am trying to make a mega drop down menu. I just want to second list items to stack up like a simple list but they hide behind one another. I don't know where I am make the mistake.
nav div .main-ul li{
display: inline-block;
}
.sub-ul li{
display: block;
position: absolute;
}
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 1</li>
<li>Item 1</li>
<li>Item 1</li>
</ul>
</div>
Just stack up the sub menu item with css.
Please try this.
<div>
<ul class="main-ul">
<li>Item 1
<ul class="sub-ul">
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
<li>Sub Menu Item</li>
</ul>
</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
</ul>
</div>
CSS
div .main-ul li {
display: inline-block;
position: relative;
border: 1px solid red;
}
div .main-ul li > .sub-ul {
display: none;
position: absolute;
top: 20px;
left: -1px;
padding: 0;
}
div .main-ul li:hover > .sub-ul {
display: block;
}
div .main-ul li > .sub-ul > li {
white-space: nowrap;
}
JsFiddle
I have an inline menu of which I want to change the last menu item so that it is a different coloured box with a different coloured text. I've managed to do this with the below class but I can't seem to work out how to change the hover state no matter what I've tried. How do I script that? Thanks.
#navbar a.blogbox {
background-color: #E4E9E7;
padding: 3px;
margin-left: 4px;
border-left: none;
text-transform:uppercase;
font-weight: bold;
color: #c52a45;
}
<div id="navbar">
<ul>
<li class="activepage">HOME</li>
<li>about us</li>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>contact</li>
<li><a class="blogbox" href="/blog/index.php">Blog</a></li>
</ul>
</div>
Is this what you want to happen?
#navbar a.blogbox {
background-color: #E4E9E7;
padding: 3px;
margin-left: 4px;
border-left: none;
text-transform:uppercase;
font-weight: bold;
color: #c52a45;
}
#navbar a.blogbox:hover {
color: green;
}
<div id="navbar">
<ul>
<li class="activepage">HOME</li>
<li>about us</li>
<li>page 1</li>
<li>page 2</li>
<li>page 3</li>
<li>page 4</li>
<li>contact</li>
<li><a class="blogbox" href="/blog/index.php">Blog</a></li>
</ul>
</div>
I'm trying to create the layout shown in the image. With the help of a partial answer, the last problem seems to be "items in a column". The block is in position, however the list of items does not start from the top. And removing margin-top from the ul doesn't help. I think it is affected by the paragraph with "title" "user".
See the latest results in the fiddle https://jsfiddle.net/L0rzj4t8/2 for this HTML content.
So, how can I achieve the layout in the image?
<div id="banner" style="background:grey">
<div id="left_block" style="float:left;width:140px">
<ul style="list-style:none">
<li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
<li>A logo</li>
<li><input id="find" type="text" size="12"></li>
</ul>
</div>
<div id="center_block" style="margin-left:150px;width:400px;">
<p id="center_top">
<span style="float:left">A Title</span>
<span style="float:right">user name</span>
</p>
<ul id="center_bottom" style="list-style:none; float:left; width:100%">
<li class="option">Option 1<li>
<li class="option">Option 2<li>
<li class="option">Option 3<li>
<li class="option">Option 4<li>
<li class="option">Option 5<li>
</ul>
</div>
<div id="rigth_block" style="margin-left:550px;width:150px;">
<ul id="items" style="list-style:none;padding-top:0px">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
Using display table property you can achieve this structure. Please find the below code and the demo link.
Note : your center bottom LI is not closed proper.
CSS
#banner{
background:#696969;
display: table;
margin: 0 auto;
border-spacing: 10px;
border-collapse: separate;
}
#left_block{
width:140px;
display: table-cell;
vertical-align: top;
border: 2px solid #000;
padding: 10px;
}
#left_block ul{
padding: 0;
margin: 0;
}
#center_block{
width:400px;
display: table-cell;
vertical-align: top;
border: 2px solid #000;
padding: 10px;
}
#rigth_block{
width:150px;
display: table-cell;
vertical-align: top;
border: 2px solid #000;
padding: 10px;
}
#center_bottom{
list-style:none;
width:100%;
padding: 0;
margin: 0;
display: inline-block;
text-align: center;
}
.option {
display:inline;
padding-left:4px;
padding-right:4px;
}
.clear{
clear:both;
}
#items{
list-style:none;
padding: 0;
margin: 0;
}
HTML
<div id="banner">
<div id="left_block">
<ul style="list-style:none">
<li><img border="0" alt="a logo" style="height:60px;width:60px"></li>
<li>A logo</li>
<li><input id="find" type="text" size="12"></li>
</ul>
</div>
<div id="center_block">
<p id="center_top">
<span style="float:left">A Title</span>
<span style="float:right">user name</span>
</p>
<ul id="center_bottom">
<li class="option">Option 1</li>
<li class="option">Option 2</li>
<li class="option">Option 3</li>
<li class="option">Option 4</li>
<li class="option">Option 5</li>
</ul>
</div>
<div id="rigth_block">
<ul id="items">
<li>item 1</li>
<li>item 2</li>
<li>item 3</li>
<li>item 4</li>
</ul>
</div>
</div>
DEMO
(updated the jsfiddle link to a recent version.koriander)
you can increase #center_bottom width by percentage or px
I have the following code that will change the state of a button when the text is changed, Even though the back style is applied successfully the color of the text will not change.
Code:
.links li {
float: left;
padding: 5px 5%;
margin-right: 5px;
background-image: url("../images/button_background.jpg");
color: white;
border-radius: 3px;
}
.links li:hover{
color: black;
background-image: url("../images/button_background_hover.jpg");
}
Check the sample. I made two samples- one with tag and one without.
<ul class="links1">
<li>link 1</li>
<li>link 2</li>
<li>link 3</li>
<li>link 4</li>
</ul>
<ul class="links">
<li>li 1</li>
<li>li 2</li>
<li>li 3</li>
<li>li 4</li>
</ul>
http://jsfiddle.net/es_kaija/rx3avr7r/
I added a horizational menu in a header of WordPress within a <nav id="hoz-menu"> I have no idea which CSS statement make the menu exceed the block. It is supposed the CSS of the menu is responsive.
Demo can be found from http://jsfiddle.net/yckelvin/nqx2a1ao/
Here is the screen capture of the Chrome debug http://screencloud.net/v/Ernf
Below is HTML code of the menu
<nav id="hoz-menu">
<ul id="hoz-menu" class="topmenu">
<li class="topfirst"><span>Item 1</span>
<ul>
<li>Item 1.1</li>
<li>Item 1.2</li>
</ul></li>
<li class="topmenu"><span>Item 2</span>
<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></li>
<li class="topmenu">Item 3</li>
<li class="topmenu">Item 4</li>
<li class="topmenu">Item 5</li>
<li class="topmenu">Item 6</li>
<li class="toplast">Item 7</li>
</ul>
</nav>
the width of <nav id="hoz-menu"> is 420px and CSS is
{
display: block;
}
CSS of <ul id="hoz-menu" class="topmenu">
#hoz-menu ul#hoz-menu, ul#hoz-menu ul {
margin: 0;
list-style: none;
padding: 0;
background-color: #dedede;
border-width: 1px;
border-style: solid;
border-color: #5f5f5f;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
}