i have a menu that i generated on purecssmenu.com and im having trouble trying to center it on my page here is the code...
<!-- Start PureCSSMenu.com STYLE -->
<style>
#pcm{display:none;}
ul.pureCssMenu ul{display:none}
ul.pureCssMenu li:hover>ul{display:block}
ul.pureCssMenu ul{position: absolute;left:-1px;top:98%;}
ul.pureCssMenu ul ul{position: absolute;left:98%;top:-2px;}
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0px;
list-style:none;
padding:0px 2px 2px 0px;
background-color:#000000;
background-repeat:repeat;
border-color:#000000;
border-width:1px;
border-style:solid;
}
ul.pureCssMenu table {border-collapse:collapse}ul.pureCssMenu {
display:block;
zoom:1;
float: left;
}
ul.pureCssMenu ul{
width:80.85000000000001px;
}
ul.pureCssMenu li{
display:block;
margin:2px 0px 0px 2px;
font-size:0px;
}
ul.pureCssMenu a:active, ul.pureCssMenu a:focus {
outline-style:none;
}
ul.pureCssMenu a, ul.pureCssMenu li.dis a:hover, ul.pureCssMenu li.sep a:hover {
display:block;
vertical-align:middle;
background-color:#000000;
border-width:1px;
border-color:#000000;
border-style:solid;
text-align:left;
text-decoration:none;
padding:2px 5px 2px 10px;
_padding-left:0;
font:11px Arial;
color: #969696;
text-decoration:none;
cursor:default;
}
ul.pureCssMenu span{
overflow:hidden;
}
ul.pureCssMenu li {
float:left;
}
ul.pureCssMenu ul li {
float:none;
}
ul.pureCssMenu ul a {
text-align:left;
white-space:nowrap;
}
ul.pureCssMenu li.sep{
text-align:left;
padding:0px;
line-height:0;
height:100%;
}
ul.pureCssMenu li.sep span{
float:none; padding-right:0;
width:3px;
height:100%;
display:inline-block;
background-color:#cccccc #111111 #111111 #cccccc; background-image:none;}
ul.pureCssMenu ul li.sep span{
width:100%;
height:3px;
}
ul.pureCssMenu li:hover{
position:relative;
}
ul.pureCssMenu li:hover>a{
background-color:#000000;
border-color:#000000;
border-style:solid;
font:11px Arial;
color: #ffa500;
text-decoration:none;
}
ul.pureCssMenu li a:hover{
position:relative;
background-color:#000000;
border-color:#000000;
border-style:solid;
font:11px Arial;
color: #ffa500;
text-decoration:none;
}
ul.pureCssMenu li.dis a {
color: #666 !important;
}
ul.pureCssMenu img {border: none;float:left;_float:none;margin-right:2px;width:16px;
height:16px;
}
ul.pureCssMenu ul img {width:16px;
height:16px;
}
ul.pureCssMenu img.over{display:none}
ul.pureCssMenu li.dis a:hover img.over{display:none !important}
ul.pureCssMenu li.dis a:hover img.def {display:inline !important}
ul.pureCssMenu li:hover > a img.def {display:none}
ul.pureCssMenu li:hover > a img.over {display:inline}
ul.pureCssMenu a:hover img.over,ul.pureCssMenu a:hover ul img.def,ul.pureCssMenu a:hover a:hover img.over{display:inline}
ul.pureCssMenu a:hover img.def,ul.pureCssMenu a:hover ul img.over,ul.pureCssMenu a:hover a:hover img.def{display:none}
ul.pureCssMenu a:hover ul{display:block}
ul.pureCssMenu span{
display:block;
background-image:url(./images/arr_white.gif);
background-position:right center;
background-repeat: no-repeat;
padding-right:12px;}
ul.pureCssMenu li:hover>a>span{ background-image:url(./images/arrv_white.gif);
}
ul.pureCssMenu a:hover span{ _background-image:url(./images/arrv_white.gif)}
ul.pureCssMenu ul span,ul.pureCssMenu a:hover table span{background-image:url(./images/arr_white.gif)}
</style>
<!-- End PureCSSMenu.com STYLE -->
and here is the html, witch is probably not even needed in this posted but i figure i would include it.. i just want that menu centered inside my website.
<!-- Start PureCSSMenu.com MENU -->
<ul class="pureCssMenu pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="home.html" target="scare">home</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">about</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>haunts</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">2009</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">2010</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">2011</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">2012</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">studio</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>products</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">nightmares</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">hauntworks</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">atmosfears</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">frightwears</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#"><span>links</span><![if gt IE 6]></a><![endif]><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul class="pureCssMenum">
<li class="pureCssMenui"><a class="pureCssMenui" href="#">haunts</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">suppliers</a></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">resources</a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]--></li>
<li class="pureCssMenui"><a class="pureCssMenui" href="#">contact</a></li>
</ul>
<a id="pcm" href="http://www.purecssmenu.com/">CSS Drop Down Menu by PureCSSMenu.com</a>
<!-- End PureCSSMenu.com MENU -->
thanks in advance for your time.
Surround it with a div and then center the div.
<div class="table">
Then add the following to your css
.table {
display: table; /* Allow the centering to work */
margin: 0 auto;
}
See the working example.
http://jsfiddle.net/uh2Jt/3/
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0 auto;
}
Here's one solution. The issue I found was that the .pureCssMenu was being floated left. I just overwrote that so you can see where it was happening. Probably a better idea to edit the css properly though, if you don't understand let me know and I'll explain more. Also wrapped it in a div (.centerme) with text-align: center;
http://jsfiddle.net/nYbcW/
.centerme{
text-align: center;
}
ul.pureCssMenu {
float: none !important;
display: inline-block !important;
text-align:center
}
Just setting:
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0 auto;
}
won't work since it looks like the menu's position is set to absolute. Instead of messing with the menu's code, you can just put it in a wrapper div like so :
<div class="menuWrapper">
all the html for the menu
</div>
and then using this CSS, with whatever width works for you:
.menuWrapper{
margin: 0 auto;
width: 400px;
}
Check out the example here: http://jsfiddle.net/mCmfU/
This is the simplest you can get:
ul.pureCssMenu,ul.pureCssMenu ul {
margin:0 auto;
float: none;
height: 25px;
width: 25%;
}
Just adjust the width and the height to your need.
Note: you can add this bit of code to the bottom of you styles so you don't need to bother searching for it.
Related
I'm trying to use PureCSS, and get menudrop downs using CSS (rather than via either YUI or Jquery for portability reasons).
This is what I have so far:
http://jsfiddle.net/ket262p3/3/
<div class="pure-menu pure-menu-open pure-menu-horizontal">
<ul>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li class="pure-menu-separator"></li>
<li>Test3</li>
</ul>
</li>
<li class="pure-dropdown">
Test1
<ul>
<li>Test2</li>
<li>Test3</li>
<li>Test4</li>
<li>Test5</li>
</ul>
</li>
</ul>
</div>
and:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-horizontal ul {
padding:0;
margin:0;
font-weight: bold;
width: 100%;
position: relative;
}
.pure-menu-horizontal ul li {
float:left;
position: relative;
display: block;
}
.pure-menu-horizontal ul li a {
display:block;
}
.pure-menu-horizontal ul ul {
display: block;
position: absolute;
top: 58px;
}
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
}
I think the underlying problem may be some subtly in purecss that causes the second level menu not to display.
Ignore the extra classes - they represent earlier stages of getting this to work with YUI or JQuery.
You have to set the visibility of your subnavigation to visible.
.pure-menu-horizontal ul li:hover > ul {
display: list-item;
left: auto;
visibility: visible;
}
Example:
http://jsfiddle.net/ket262p3/6/
On further investigation it appears that a lot of the infrastructure for doing this is already built into PureCSS, but not documented very well. I replicate the solution below so that other people can find it.
The main solution is documented here: https://gist.github.com/maxbeatty/7829915
I have replicated in a jsfiddle: http://jsfiddle.net/0562cqd8/1/
The html is as follows
<!-- includes pure-min.css -->
<div class="pure-menu pure-menu-open pure-menu-horizontal">
Heading
<ul class="pure-menu-children">
<li class="pure-menu-can-have-children pure-menu-selected">
Cars
<ul>
<li>
Blue
</li>
<li>
Red
</li>
<li>
Green
</li>
</ul>
</li>
<li>
Trucks
</li>
</ul>
</div>
With CSS like this:
#import url("http://yui.yahooapis.com/pure/0.5.0/pure-min.css");
.pure-menu-can-have-children:hover {
background: #eee;
}
.pure-menu-can-have-children:hover ul {
top: 35px; /* height of menu li */
left: 0;
visibility: visible;
border: 1px solid #b7b7b7;
background: #fff;
}
Please try this css
.pure-menu ul
{
margin:0;
padding:0;
float:left;
width:100%;
}
.pure-menu ul > li
{
margin:0;
padding:0;
float:left;
list-style:none;
position:relative;}
.pure-menu ul > li >a
{
margin:0;
padding:0;
float:left;
padding:8px 4px;
text-decoration:none;
color:red;}
.pure-menu ul > li > ul
{
position:absolute;
top:100%;
left:0;
display:none;
width:200px;
}
.pure-menu ul > li > ul >li
{
width:100%;
}
.pure-menu ul > li > ul >li >a
{
padding:8px 20px;
background:red;
color:#fff;}
li.pure-dropdown:hover ul {
display:block;
}
change the color as per your requirement
I am trying to create a menu as follows. When hover the menu item, it should be animate the height from bottom to top. So I positioned anchor tag absolute and gave bottom 0. When anchor tag is positioned absolute, It does not show menu properly.
css is as follows.
#navigation
{
position:relative;
float:right;
margin-top:55px;
padding-right:45px;
}
#navigation ul
{
text-decoration:none;
list-style:none;
display:inline;
position:relative;
padding:0px;
height:30px;
margin:0px;
}
#navigation ul li
{
position:relative;
float:left;
}
#navigation ul li a
{
position:absolute;
bottom:0px;
padding:10px 5px;
width:79px;
display:block;
text-decoration:none;
background-color:#1c1c1c;
color:rgb(255,255,255);
/*margin:2px;
margin-bottom:0px;*/
text-align:center;
font-family:Tahoma;
/*position:relative;*/
font-size:15px;
}
html is as follows.
<div id="navigation">
<ul>
<li>Home</li>
<li>About Us</li>
<li>Products</li>
<li>Contact Us</li>
</ul>
</div>
http://jsfiddle.net/90up4hz2/
demo - http://jsfiddle.net/victor_007/90up4hz2/1/
the issue is because of position:absolute for the li and position:relative the width becomes 0 try adding fixed with for li
#navigation ul li {
position:relative;
float:left;
height:30px;
width:89px;
}
http://jsfiddle.net/L0r493ag/2/
I created this for you, dont use ul li or just add the follow css to them or to any object
.boxhead
{
color: #afaeae;
text-decoration: none;
font-size: 17px;
font-family: 'Open Sans', sans-serif;
font-weight: 400;
background:#000000;
padding-left:10px;
padding-right:10px;
height:50px;
}
.boxhead:hover
{
color: #7d7d7d;
}
and then
<div id="navigation">
<a class="boxhead" href="index.php">Home</a>
<a class="boxhead" href="about-us.php">About Us</a>
<a class="boxhead" href="products.php">Products</a>
<a class="boxhead" href="contact-us.php">Contact Us</a>
</div>
I have a hosted blog and I'm modifying templates, however the code for adding submenus to the nav bar is straight out of this great tutorial:
http://www.devinrolsen.com/pure-css-horizontal-menu/
I also read this answer to the question on Stackoverflow http://bit.ly/16KQN0M
But if it's a matter of clearing a float, I can't see where to put "clear: both;" in the HTML (at least, nothing I've tried has worked).
And changing #dropnav li li to display: block; doesn't work either. There must be something I'm missing ...
Here is the CSS. The classes at the top are related to the template but I'll leave them in as they might be relevant.
<style type="text/css">
/* Derived from http://www.devinrolsen.com/pure-css-horizontal-menu/ */
#pagebody { position: inherit !important; width: 100%; }
#pagebody-inner { position: inherit !important; width: 100%; }
#alpha, #beta, #gamma, #delta {
display: inline;
position: inherit !important;
float: left;
min-height: 0px;
}
#dropnav
{height:31px;}
#dropnav ul
{margin:0px; padding:0px;}
#dropnav ul li
{display:inline; float:left; list-style:none; position: relative; height:31px;
width: 175px; }
#dropnav li a
{color:#efe1ca; font-family:'Roboto Condensed', sans-serif; font-weight:400;
font-size:12px; }
#dropnav li a:hover
{color:#fff; text-decoration: none;}
#dropnav li ul
{margin: 0px; padding: 0px; display: none; position: absolute; z-index: 99; top:
31px; background-color: #f6f3cb; width: 250px;}
#dropnav li:hover ul
{display:block; width:250px; }
#dropnav li li
{list-style:none; display:list-item; font-size:100%;}
#dropnav li li a
{color: #7a3535; text-decoration:underline; width: 250px; font-size: 16px; }
#dropnav li li a:hover
{color:#000000; text-decoration:none; }
li#main {padding: 0px;} /* Sets the padding of items in the main menu */
</style>
And HTML markup, with titles removed:
<div id="main">
<div id="dropnav">
<ul>
<li class="nav-list-item">-------
<ul id="subnav">
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
<li style="width:180px;">-------</li>
</ul>
</li>
<li class="nav-list-item">-------
<ul id="subnav">
<li style="width:180px;">-------</li>
<li style="width:180px;"><a href="">-------</li>
</ul>
</li>
</ul>
</div>
</div>
I trying to build my own multi dropdown menu, and i encounter this problem and have to ideal how to solve it. The best i get is using margin-left:-100px but it will run out of alignment when dropdown more then level 2.
this is what i try to develop
and this is my BEST solution so far... but NOT what i want
this are my html code
<div id="menuBox">
<li class="mainMenu">home</li>
<li class="mainMenu">about</li>
<li class="mainMenu">product
<ul class="w200">
<li>money maker</li>
<li>personal coarch
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
<li class="mainMenu">consult</li>
<li class="mainMenu">contact</li>
</div>
this is my CSS setting
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li{
background:#CCCCCC;
cursor:pointer;
}
ul{
float:left;
position:absolute;
z-index:999;
list-style:none;
}
ul>li{
padding:5px 20px;
}
So which/how should i modify my code?
First you need to change the div to ul since the li items are only allowed to be inside ul/ol elements.
Try with this CSS
#menuBox, #menuBox ul{ /*reset ul styling for menu/submenu*/
padding:0;
margin:0;
}
#menuBox{
white-space:nowrap;
list-style:none;
font-size:1.3em;
}
#menuBox > li{ /*first level li elements*/
display:inline-block;
padding:25px 35px;
border-top:1px solid #CCCDDD;
margin:0px;
}
#menuBox li{ /*all li elements*/
position:relative;
background:#CCCCCC;
cursor:pointer;
}
#menuBox li:hover{ /*hovered li elements*/
background:black;
color:white;
}
#menuBox li li{ /*sub li elements - all levels after 1st*/
color:black; /*hide all submenus*/
padding:5px 20px;
}
#menuBox li:hover > ul { /*submenu ul elements*/
display:block; /*show submenu when parent li is hovered*/
}
#menuBox ul{ /*all submenu ul elements*/
z-index:999;
list-style:none;
position:absolute;
top:80%;
left:50%;
border:1px solid black;
display:none;
}
Demo at http://jsfiddle.net/gaby/g6yX2/
it because in your li.mainMenu padding left is set to 35, remove it.
if you want to keep that padding:
HTML:
<li class="mainMenu"><label>product</label>
<ul class="w200">
<li><label>money maker</label></li>
<li><label>personal coarch</label>
<ul class="w200">
<li>1 to 1</li>
<li>1 to 5</li>
<li>1 to 10</li>
</ul>
</li>
</ul>
</li>
CSS:
li.mainMenu{
list-style:none;
display:inline-block;
padding:25px 0px;
border-top:1px solid #CCCDDD;
margin:0px;
font-size:1.3em;
background:#CCCCCC;
}
li.mainMenu label {
padding: 0px 35px;
}
Example: http://jsfiddle.net/RaPK9/
I'm trying to make the <li> fit the width of the <ul> but even with width:auto it doesn't work at all, and I don't know why. I tried to use display:inline-block but this is the same. I don't know how many tabs I will have so this is why I am not using a percentage directly.
I would like to display the list inline when I display the page on a desktop and display one li per line when I am on a smartphone (with media queries).
I have this:
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
and my CSS looks like this:
ul#menu
{
margin:0;
padding:0;
list-style-type:none;
width:100%;
position:relative;
display:block;
height:30px;
font-size:12px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
/*border-bottom:1px solid #000000;
border-top:1px solid #000000;*/
}
li.button {
background:transparent url(../images/nav_bg.png) repeat-x top left;
height:30px;
width:auto;
}
ul#menu li
{
display:inline-block;
margin:0;
padding:0;
width:auto;
}
ul#menu li a
{
display:inline-block;
color:#999999;
text-decoration:none;
font-weight:bold;
padding:8px 20px 0 20px;
width:auto;
}
ul#menu li a:hover
{
color:#FFFFFF;
height:22px;
background:transparent url(../images/nav_bg.png) 0px -30px no-repeat;
}
ul#menu li a.current
{
display:inline-block;
height:22px;
background:transparent url(images/nav_bg.png) 0px -30px no-repeat;
margin:0;
}
I've found this way to deal with single-line full-width ul where an undefined number of li elements need to be spaced out evenly:
ul {
width: 100%;
display: table;
table-layout: fixed; /* optional */
}
ul li {
display: table-cell;
width: auto;
text-align: center;
}
Basically, it emulates a table. Works in Gecko, Webkit, IE8+.
For IE7 and downwards you should use some inline-block hackery :)
JSFiddle
Since the li count can change, I can only think of accomplishing this with javascript/jquery as you suggested. Just divide 100 by the # of li's and set the width on each one.
var width = Math.floor(100 / $("ul#menu li").size());
$("ul#menu li").css('width', width + "%");
You will probably have to play with the width depending on padding and what not.
As a side note, If you haven't already, I recommend getting a tool like firebug, which will let you edit css and execute js on the fly. It is infinitely useful for fine tuning appearances.
If you want to fill the width of the <ul> with the five <li>s, you will have to give those <li>s a width of 20% each.
Note that you need to change some other details of the CSS if you want to make this work; e.g. with a display:inline-block you make the spaces between the <li> count, so the total width of the <ul> content will be more than 100% wide. I'd suggest removing the display:inline-block and giving them float:left.
Edit: Or do you want them to be distributed proportionally according to their contents? That would be a different challenge.
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<style>
body{
margin:0 auto;
}
.main{
width:650px;
border:1px solid red;
padding:5px;
}
ul {
padding:0;
margin:0;
width: 100%;
border-bottom: 0;
}
li{
display: table-cell;
width: 1%;
float: none;
border:1px solid green;
margin:2px;
padding:10px;
text-align:center;
}
</style>
</head>
<body>
<div class="main">
<ul>
<li>Link 1</li>
<li>Link 2</li>
<li>Link 3</li>
<li>Link 4</li>
<li>Link 5</li>
</ul>
</div>
</body>
</html>
#menu {
padding: 0;
margin: 0;
border: 1px solid red;
position: absolute;
}
#menu li {
list-style-type: none;
float: left;
position: relative;
padding-right: 10px;
}
#menu li a {
text-decoration: none;
}
<ul id="menu">
<li>1A1CASĂ </li>
<li>H1TML-CSS </li>
<li>J1VASCRIPT </li>
<li>PHP </li>
<li>TESTE </li>
<li>CONTACT </li>
</ul>
Wow stumbled upon a very old question here.
For anyone also seeing this and scrolling down here, in 2022 this is easily doable via flexbox.
#menu {
display: flex;
gap: 1rem;
}
li {
list-style-type: none;
}
<ul id='menu'>
<li class="button"><a class='current' href='http://'>Home</a></li>
<li class="button"><a href='http://'>Products</a></li>
<li class="button"><a href='http://'>Support</a></li>
<li class="button"><a href='http://'>Contact</a></li>
<li class="button"><a href='http://'>Contact</a></li>
</ul>
try below css:
style.css (line 87)
ul#menu li {
float: left;
margin: 0;
padding: 6px 0;
width: 11.1%;
}
style.css (line 113)
ul#menu li a.current {
background: url("images/nav_bg.png") no-repeat scroll 0 -30px transparent;
height: 22px;
margin: 0;
}
style.css (line 95)
ul#menu li a {
color: #999999;
font-weight: bold;
padding: 8px 20px 0;
text-decoration: none;
width: auto;
}
see screen shot: