http://designmodo.github.io/Flat-UI/
I wanted to create a Css drop down menu, I have the drop down portion done, however I can't seem to emulate the transitions and have no idea how to code those. Here is what I have so far, thanks in advance for your help.
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;
}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
body {
font-family: 'Lucida Grande', 'Helvetica Neue', Helvetica, Arial, sans-serif;
padding: 20px 50px 150px;
font-size: 13px;
text-align: center;
background: #E3CAA1;}
ul {
text-align: left;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
</style>
</head>
<body>
<ul>
<li>Dropdown menu items</li>
<li>Dropdown menu items</li>
<li>Dropdown menu items
<ul>
<li>Drop - Dropdown menu items</li>
<li>Drop - Dropdown menu items</li>
<li>Drop - Dropdown menu items</li>
<li>Drop - Dropdown menu items</li>
</ul>
</li>
<li>Dropdown menu items</li>
<li>Dropdown menu items</li>
</ul>
</body>
</html>
Related
I have a simple drop down menu, but no matter what, i cant get it to center on the page. I've tried so many things, and i have already searched other questions, cant get it to work.
Here is my html/php:
<ul>
<li>Home</li>
<li>Géneros
<ul>
<?php
$query = "SELECT * FROM `categorias` where 1";
$result = mysqli_query ($ligacao, $query);
while ( $row = mysqli_fetch_array ($result)) {
$categoria= $row['cod_categoria'];
echo "<li><a href='artigos.php?catid=$categoria'>" . $row['nome_categoria'] . "</a></li>";
}
?>
</ul>
</li>
<?php
if(isset($_SESSION['id'])){
echo "<li><a href='logout.php'>Logout</a></li>";
}
else{
echo "<li><a href='login.php'>Login</a></li>";
echo "<li><a href='registo.php'>Registar</a></li>";
}
?>
</ul>
And here is the css:
ul {
text-align: center;
display: inline;
margin: 0;
padding: 15px 4px 17px 0;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
}
ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-left: -4px;
position: relative;
padding: 15px 20px;
background: #fff;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover { background: #666; }
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
Everything is correct, righr? But the menu still appears on the left side of the page, i dont know why. After the menu i got a wrapper div, that have this css:
.wrapper {
width:100%;
height:100%;
text-align:center;
}
Maybe its this that its causing the menu to not center? I dont know... Can someone try to help me?
This is the only extra css i got:
body{
background:url('symphony.png');
color:#888;
padding:0;
margin:0;
font: 72.5% 'Helvetica Neue', Helvetica, Arial, sans-serif;
}
.wrapper {
width:100%;
height:100%;
text-align:center;
}
.artigo {
background:#CCC;
text-align:center;
width:30%;
height:60%;
background:#FFF;
margin:40px auto;
}
img{
display: block;
margin-left: auto;
margin-right: auto
}
Look at code that you provide and see that menu is centered:
http://jsfiddle.net/kc1bfn9z/
.other-css
May be some other css rules replace these css rules?
I want to reduce the size of the drop down menus to the same as the buttons. Adjusting either the padding or margin would move the items out of place and close themselves when I try to hover over it. I'd like to know what is causing this. Here's the Fiddle
Any help would be great.
CSS:
.sort ul {
text-align: left;
display: inline;
margin: 0;
list-style: none;
-webkit-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 1px rgba(0, 0, 0, 0.15);
float:right;
}
.sort ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
position: relative;
padding: 15px 20px;
background: #FF5C00 url(http://i1350.photobucket.com/albums/p769/Stonecold_Stone/Games/SoManySales/Joint%20Supplement/alert-overlay_zpsf561d19b.png) repeat-x;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
color:#fff;
}
.sort ul li:hover {
background: #555;
color: #fff;
}
.sort ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 150px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
.sort ul li ul li {
background: #FFDFDF;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
z-index:9999;
}
.sort ul li ul li:hover { background: #666; }
.sort ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
.button, ul{ padding-left: 15px;}
.button {
list-style: none; cursor: pointer;
float: left; margin: 10px 10px;
background-color: #039fd3; color: #fff;
padding: 5px 10px;
font-size: 13px;
border-radius: 3px;
-webkit-transition:background-color 0.3s ease-in;
-moz-transition:background-color 0.3s ease-in;
-o-transition:background-color 0.3s ease-in;
transition:background-color 0.3s ease-in;
}
HTML:
<div class="sort"><ul>
<li>
Sort AXXX
<ul>
<li><a href='#'>SXXXX</a></li>
<li><a href='%#%'>AXXXx</a></li>
</ul>
</li>
<li>Sort BXXX
<ul>
<li><a href='%#%'>CXXXX</a></li>
</ul>
</li>
<li>Sort C
<ul>
<li><a href='%#%'>WSXXXX</a></li>
<li><a href='%#%'>SXXXX</a></li>
</ul>
</li>
</ul></div>
Following the op coding style, in order to adjust the width of the dropdown it is required to set a width value for the list items under .sort div. Also added paddings similar to the ones set to the blue buttons on the left.
.sort ul li{
width:70px;
padding-top:5px;
padding-bottom:5px;
padding-left:5px;
padding-right:5px;
}
Also it is necesary to adjust the top relative position of the sub menu to always be below the the main menu,
.sort ul li ul{
top:100%;
}
To adjust the distance from the top of the menu to be the same as with the buttons, it is possible to tweak the top relative distance of the menu to achieve it.
The ul element containing the buttons is a block element and the list items within it are floated with a margin-top of 10px and padding-top of 5px so a total of 15px from the top. The ul element within div.sort is floated to the right and has a padding-top of 5px so with margin-top 10px (i.e. 15-5) should be aligned with the buttons.
.sort > ul{
margin-top:10px;
}
http://jsfiddle.net/fLSyE/
First is, if you want your buttons and drop down menu to have the same size, just set the width to be the same. Here is an example(from your code):
.sort ul li ul {
padding: 0;
position: absolute;
top: 48px;
left: 0;
width: 100px; /* set width of drop down menu to 100px */
-webkit-box-shadow: none;
/* SOME OTHER CODES FOLLOW */
}
.sort ul li {
font: bold 12px/18px sans-serif;
display: inline-block;
margin-right: -4px;
width: 100px; /* also set the width of the menus to 100px */
position: relative;
padding: 15px 20px;
}
Hope it helps!
I've been trying for a while now to center everything that's in my Navigation Bar. Here's my CSS and HTML code I would appreciate it if anyone could give me a hint on what to do.
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 70px;
background-color: #232323;
box-shadow: 0px 2px 3px rgba(0, 0, 0, 0.4);
width: auto;
text-align: center;
}
#cssmenu > ul > li {
float: left;
margin-left: 15px;
position: relative;
}
#cssmenu > ul > li > a {
color: #a0a0a0;
font-family: Verdana, 'Lucida Grande';
font-size: 15px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #ffffff;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #fafafa transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #323232;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #fafafa;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #f0f0f0;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #fafafa;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #cc2c24;
color: #f0f0f0;
}
And finally my HTML.
<div id='cssmenu'>
<ul>
<li class='active'><a href='index.html'><span>Home</span></a></li>
<li><a href='#'><span>Forums</span></a></li>
<li><a href='#'><span>Title1</span></a></li>
<li><a href='#'><span>Title2</span></a></li>
<li><a href='#'><span>Title3</span></a></li>
<li class='last'><a href='#'><span>Title4</span></a></li>
</ul>
</div>
Currently all that happens is my navigation bar is 100% width which is what I want but, the buttons are still aligned to the left and I want them to be in the center. I've tried numerous things and can't seem to make it work. Any help is greatly appreciated.
You only need this :
#cssmenu > ul {
display:table;
margin:0 auto;
}
View the demo http://jsfiddle.net/sn3Hn/2/
Use same structure, but you need change your css:
#cssmenu ul
{
text-align: center;
}
#cssmenu li
{
display: inline-block; < Secret;
margin: 0;
padding: 0;
}
Codepen > http://cdpn.io/usChr
Resolve?
Good lucky
I've had success using the css table method.
#cssmenu ul {
display: table;
width: 100%;
}
#cssmenu ul li {
display: table-cell;
}
My site has one drop down menu which does not work in iOS or on android. I know the problem is due to the lack of cursor on these devices, so I'm looking to switch the menu from a hover action to a clickable one. I lack the proper terms to speak intelligently on this subject so hopefully what I'm asking makes sense. www.salvageinteriors.com
Here's my code:
CSS:
#cssmenu ul {
margin: 0;
padding: 0;
}
#cssmenu li {
margin: 0;
padding: 0;
z-index: 29;
}
#cssmenu a {
margin: 0;
padding: 0;
}
#cssmenu ul {
list-style: none;
}
#cssmenu a {
text-decoration: none;
}
#cssmenu {
height: 31px;
background-color: #ffffff;
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
width: 940px;
}
#cssmenu > ul > li {
float: left;
margin-left: 45px;
margin-top: -20px;
position: relative;
}
#cssmenu > ul > li > a {
color: #000000;
font-family: calibri;
font-size: 18px;
line-height: 70px;
padding: 15px 20px;
-webkit-transition: color .15s;
-moz-transition: color .15s;
-o-transition: color .15s;
transition: color .15s;
}
#cssmenu > ul > li > a:hover {
color: #000000;
}
#cssmenu > ul > li > ul {
opacity: 0;
visibility: hidden;
padding: 16px 0 20px 0;
background-color: #000000;
text-align: left;
position: absolute;
top: 55px;
left: 50%;
margin-left: -90px;
width: 180px;
-webkit-transition: all .3s .1s;
-moz-transition: all .3s .1s;
-o-transition: all .3s .1s;
transition: all .3s .1s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 0px 0px rgba(0, 0, 0, 0.4);
}
#cssmenu > ul > li:hover > ul {
opacity: 1;
top: 65px;
visibility: visible;
}
#cssmenu > ul > li > ul:before {
content: '';
display: block;
border-color: transparent transparent #000000 transparent;
border-style: solid;
border-width: 10px;
position: absolute;
top: -20px;
left: 50%;
margin-left: -10px;
}
#cssmenu > ul ul > li {
position: relative;
}
#cssmenu ul ul a {
color: #ffffff;
font-family: Verdana, 'Lucida Grande';
font-size: 13px;
background-color: #000000;
padding: 5px 8px 7px 16px;
display: block;
-webkit-transition: background-color 0.1s;
-moz-transition: background-color 0.1s;
-o-transition: background-color 0.1s;
transition: background-color 0.1s;
}
#cssmenu ul ul a:hover {
background-color: #000000;
}
#cssmenu ul ul ul {
visibility: hidden;
opacity: 0;
position: absolute;
top: -16px;
left: 206px;
padding: 16px 0 20px 0;
background-color: #ffffff;
text-align: left;
width: 180px;
-webkit-transition: all .3s;
-moz-transition: all .3s;
-o-transition: all .3s;
transition: all .3s;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 5px;
-webkit-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
-moz-box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
box-shadow: 0px 1px 3px rgba(0, 0, 0, 0.4);
}
#cssmenu ul ul > li:hover > ul {
opacity: 1;
left: 190px;
visibility: visible;
}
#cssmenu ul ul a:hover {
background-color: #ffffff;
color: #000000;
}
HTML:
<div id='cssmenu'>
<ul>
<li class='has-sub'><a href='http://www.salvageinteriors.com/p/work.html'> <span>Work</span></a>
<ul>
<li><a href='http://www.salvageinteriors.com/p/commercial.html'><span>Commercial Fixtures</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/furniture_13.html'><span>Furniture</span></a></li>
<li class='last'><a href='http://www.salvageinteriors.com/p/accoutrements.html'><span>Accoutrements</span></a></li>
</ul>
</li>
<li><a href='http://www.salvageinteriors.com/p/about.html'><span>About</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/clients.html'><span>Clients</span></a></li>
<li><a href='http://www.salvageinteriors.com/p/press.html'><span>Press</span></a></li>
<li><a href='http://salvageinteriors.bigcartel.com/' target='_blank'><span>Shop</span></a></li>
<li><a href='http://salvageinteriorsblog.com/' target='_blank'><span>Blog</span></a></li>
<li class='last'><a href='http://www.salvageinteriors.com/p/contact.html'> <span>Contact</span></a></li>
</ul>
</div>
honestly, at least until everyone can figure out hovers for touch devices, we're kind of screwed when it comes to this stuff. There are two ways to work around this:
1) put all of your hover declarations behind a touch class and use Modernizr to add a touch class to your body element whenever the device is detected to be touch enabled.
2)Or you can just put your hover declarations inside of a media query that targets anything over 1024px.
Neither of these are very good solutions, but I will be the first to admit that I have used them before. I would probably use Modernizr if possible.
My CSS menu is not displaying correctly, the sub menu items ends up on the parent menu.
The problem occurs when there are more items in the sub menu than in the parent.
Many thanks for any ideas how to fix this.
HTML
<nav>
<ul>
<li id="databases"/>
<li id="chartButton" class="dropdown">
Charts
<ul>
<li>Completed/Aborted</li>
<li>Average Response Times</li>
<li>Average TPS</li>
<li>Top 10 Completed</li>
<li>Top 10 Aborted
<ul>
<li>Last 10 Min</li>
<li>Last 10 Hours</li>
<li>Last 10 Days</li>
</ul>
</li>
</ul>
</li>
<li id="processes"/>
</ul>
</nav>
CSS
ul {
text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
text-align: left;
display: inline;
margin: 0;
padding: 10px 0px 10px 25px;
list-style: none;
-webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
-moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
box-shadow: 0 0 1px rgba(0, 0, 0, 0.01);
}
ul li {
text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
font: bold 20px;
display: inline-block;
font-family: "Montserrat",sans-serif;
margin-right: -4px;
position: relative;
padding: 10px 20px 10px 15px;
cursor: pointer;
-webkit-transition: all 0.2s;
-moz-transition: all 0.2s;
-ms-transition: all 0.2s;
-o-transition: all 0.2s;
transition: all 0.2s;
}
ul li:hover {
background: #555;
color: #fff;
}
ul li ul {
text-shadow: 0 0 6px rgba(255, 255, 255, 0.7);
padding: 0;
position: absolute;
top: 37px;
left: 0;
width: 250px;
-webkit-box-shadow: none;
-moz-box-shadow: none;
box-shadow: none;
display: none;
opacity: 0;
visibility: hidden;
-webkit-transiton: opacity 0.2s;
-moz-transition: opacity 0.2s;
-ms-transition: opacity 0.2s;
-o-transition: opacity 0.2s;
-transition: opacity 0.2s;
}
ul li ul li {
background: #555;
display: block;
color: #fff;
text-shadow: 0 -1px 0 #000;
}
ul li ul li:hover {
background: #666;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
}
li.dropdown ul {
display : none;
}
nav ul li:hover > ul {
display: block;
}
nav ul li ul li:hover ul{
position: absolute; left: 100%; top:0;
}
Why is all 3 sub menu items showing up in parent menu?
Sub menu is showing correctly when hovering the parent menu item, but 2 of the sub menu items is also showing up in parent menu, why?
Change ul li:hover>ul to ul li:hover ul.
> is a child selector. Learn more about it on MDN and W3C.
Working Fiddle