I have recently been working on a small CSS menu that I can’t get working properly. Ive been fiddling around with existing menu’s and trying to get the positioning and fonts etc to be working.
Basically first I had my main menu, which is working fine the way it should. Now when I try add a dropdown to one of the options, it really messes up and I am completely clueless to fixing this mess :S
What I need help in: Positioning the dropdown menu’s below the correct menu-item (now they always float on the left). Also I want the submenu items, to be the exact same style/size/font/etc as the main menu items, which for some reason I can’t get working either.
Any help is appreciated, I submitted the CSS / HTML Code of the menu into a pastebin file:
CSS: http://pastebin.com/rJEgvnK1
HTML: http://pastebin.com/e52RuH4r
Its not perfect but still you can figure out the positioning correctly but not the fonts. Check this jsfiddle
CSS used:
#mainMenu ul{
width:954px;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size: 18px;
text-transform: uppercase;
}
#mainMenu ul li a{
text-decoration:none;
color:#000000;
background-color:#eee;
padding:0.2em 0.6em;
border-right:0px solid white;
display:block;
}
#mainMenu a:hover{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul li{
display:inline-block;
position: relative;
}
#mainMenu ul ul {
background-color: #eee;
display: none;
width: 133px;
height: auto;
position: absolute;
border: solid 1px #ddd;
top: 23px;
}
#mainMenu ul li:hover > ul{
display:block;
padding:0;
margin:5px 0 10px 0;
list-style-type:none;
border:solid 2px #ddd;
font-size:18px;
text-transform:uppercase;
}
#mainMenu ul ul li:hover a{
color:#FFFFFF;
background-color:#2E9AFE;
}
#mainMenu ul ul li:hover {
cursor:pointer;
}
#mainMenu ul ul li {
float:none;
padding:10px;
}
#mainMenu ul ul li{
font-size:16px;
padding:0 10px;
}
Not perfect but this should get you furter:
jsfiddle
To get the blocks below each link (IN YOUR CSS), simply remove the a-Tag from #mainMenu ul li a{
This one is a little nicer !!!
Related
I want to put the logo in-between the navigation menus but I can't figure out how to do it in the theme that I have because I'm having trouble finding it in the backend. I'm sure it's just a matter of reordering something or adding a margin and a space for the photo... Under the header section of the CSS this is the code:
#header { padding:0 20px;margin-bottom:8px;}
#logo { float:left; }
#logo { text-transform:capitalize; padding:35px 0; }
#logo img { max-width:100%; }
#navigation { float:right; margin-right:20px; }
#navigation ul { list-style:none; position:relative; }
#navigation ul li { float:left; padding-left:30px; font-size:12px; display:block; position:relative; font-weight:bold; }
#navigation ul li a { color:#888; padding-bottom:10px; padding-top:35px; display:block; }
#navigation ul li ul { position:absolute; border:1px solid #e9e9e9; display:none; left:15px; padding-bottom:15px; z-index:9999; }
#navigation ul li ul li { min-width:150px; margin-left:15px; margin-right:15px; padding:15px 0 10px 0; border-bottom:1px solid #f6f6f6; font-weight:normal; font-size:10px; }
#navigation ul li ul li:last-child { border:0; padding-bottom:0; }
#navigation ul li ul li a { border:0; display:block; padding:0; }
#navigation li:hover ul { display:block; }
#navigation select { display:none; -webkit-appearance: none; border-radius: 0; }
#navigation ul li#magic-line { position: absolute; left: 0; width: 100px; height: 4px; padding-left:0; display:none; }
I suppose u are using wordpress theme ? If so, each li has its own classes. So you should create one "empty" menu, and add it as background of that link, you can make link to be home page. Text you can hide with text-indent:-9999px;
If u have exact link, i can be more helpful, check how i pulled it out here: http://itsgoran.com/cider
Update:
code should be like this:
li#menu-item-15 {
background-image: url(http://www.new.sheisbiddy.com/wp-content/uploads/2015/11/SHEISBIDDYmainlogoandslogan1.png);
width: 470px;
height: 130px;
background-repeat: no-repeat;
text-indent: -9999px;
}
but i suggest firstly to create smaller logo image, then use that image for this, and ofcourse add smaller width and height which would be width/height of that smaller image.
http://jsfiddle.net/KsR5K/
#nav {
position: absolute;
font-family: digital_techregular;
font-size: 24px;
}
#nav ul ul {
display: none;
}
#nav ul li:hover > ul {
display:block
}
#nav ul {
background: #000;
list-style: none;
position: relative;
padding: 0px;
}
#nav ul:after {
content:"";
clear:both;
display:block
}
#nav ul li {
float:left
}
#nav ul li:hover {
background: #757575;
}
#nav ul li:hover a {
color:#fff
}
#nav ul li a {
display:block;
padding-top: 3px;
padding-left: 20px;
padding-right:20px;
color:#fff;
text-decoration:none
}
#nav ul ul {
background: #000;
padding:0;
position:absolute;
top:100%
}
#nav ul ul li {
float:none;
position:relative
}
#nav ul ul ul {
position:absolute;
left:100%;
top:0;
}
#nav ul ul li a {
padding-left: 20px;
padding-right: 20px;
color:#fff
}
#nav ul ul li a:hover {
background:#757575;
}
Right now, I have two drop down menus. One under Browse Models, and another under Tutorials.
If you look at the sub menus, the items' widths adjust accordingly depending on what is typed. If you look at tutorials, under the Printers sub menu, you will see Test, and Test 2. Only on Test 2, the 2 is placed underneath the word Test.
Basically, the sub sub menus aren't properly adjusting based on the width of the items in the same way that the sub menus are. If you were to type "Model Finishing" where Test 2 is, it would stack the words. But the "Model Finishing" item in the sub menu is all on one line.
I'm still pretty new at this. This is the first time I've tried to create a nested menu like this, I'm pretty much just going off of tutorials, so any advice would be appreciated.
Thanks for your time.
Edit: Changed the JSfiddle and code to reflect what I'm currently working with.
http://jsfiddle.net/S5cYJ/6/
#nav ul ul ul {
/* add this */
width:100%;
}
also remove width:100% from below
#nav ul ul li a {
padding: 15px 40px;
color: #fff;
display:block;
}
you should look into bootstrap. It has a nice menu already built so that you can concentrate and doing other things http://getbootstrap.com/components/#navbar
Fixed this by adding:
white-space: nowrap;
to #nav ul.
hoping someone could help me solve this issue...im not using js, just css and html. I have built a menu which works good but my issue is when i try to add in a sub menu. I would like for it be hidden until someone goes over the main menu, then i would like for it to drop down. The effect that im getting now is my sub menu loads right away with the main menu above it and then it disappears when i go over that main menu item. i have tried some different things such as adding z-index here and there, but no luck so far...
HTML:
<div id="container">
<div id="menu">
<ul id="nav">
<ul>
<li id="menu1"><h2>Home</h2></li>
<li id="menu2"><h2>Sign-Up</h2></li>
<li id="menu3"><h2>Packages</h2>
<ul>
<li>Gold</li>
<li>Platinum</li>
</ul>
</li>
<li id="menu4"><h2>About Us</h2></li>
<li id="menu5"><h2>Contact</h2></li>
</ul>
</ul>
</div>
CSS:
* {
margin:0px;
padding:0px;
}
.form-textbox{
height:100px;
font-size:100px;
}
#fieldset{
width:300px;
}
#fieldst p{
clear:both;
padding:5px;
}
#legend{
font-size:16px;
}
label[for="username"] {
color:#FFFFFF;
font-weight:bold;
clear:both;
text-align:left;
}
label[for="password"] {
color:#FFFFFF;
font-weight:bold;
clear: both;
text-align:left;
margin-top:40px;
}
body {
padding-top:0px;
background-color:#01111d;
color:#FFF;
font-family:verdana, arial, sans-serif;
text-align: left;
letter-spacing: 1px;
}
a {
color: #FFF;
font-size: 14px;
}
a:hover {
color:#efae00;
} //01a9c0
.more {
float:left;
}
.clear {
clear:both;
}
p {
margin: 20px 0px 20px 0px;
line-height: 16px;
font-size: 14px;
}
#container {
margin: 0px auto;
width: 873px;
}
#menu {
background-image:url(images/menu.gif);
width:862px;
height:90px;
position:relative;
z-index:99999;
}
#menu li{
position:absolute;
top:40px;
list-style-type:none;
}
#menu1 {
left:110px;
}
#menu2 {
left:255px;
}
#menu3 {
left:400px;
}
#menu4 {
left:540px;
}
#menu5 {
left:680px;
}
#menu a {
font-family: verdana, arial, sans-serif;
font-size:12px;
font-weight:bolder;
color:#FFFFFF;
text-decoration:none;
text-transform:uppercase;
}
#menu a:hover {
color:#efae00;
}
#menu li > #nav li ul
#nav li ul {
position:absolute;
display:none;
}
#nav li:hover ul {
display: none;
}
#nav li ul li {
float: none;
display: block;
}
#nav li ul li a {
width: 118px;
position: absolute;
border-left: 1px solid black;
border-right: 1px solid black;
border-bottom: 1px solid black;
background: #333;
color: #fff;
}
#nav li ul li a:hover {
background: #066;
color: #000;
}
Jsfiddle here: http://jsfiddle.net/bC7f2/
So it appears there are a few things that we can change in your code. The first thing is when you should and should not display things. To keep it short, I have made a few adjustments to the CSS code, just be sure you are getting the exact area you are trying to use. Here are the new selector names:
#nav ul li:hover ul #ITEM NAME HERE
#nav li ul # ITEM NAME HERE
Next, you started off by displaying your drop down menu as "display: block;" , this means that anything in the drop down menu will automatically begin on the page, this should actually be set to "display:none;", so that it is not visible until you hover. Here is your end product:
#nav ul li:hover ul #item1 {
display: none;
position: absolute;
z-index: 100;
display: inline-block;
top: 20px;
}
#nav ul li:hover ul #item2 {
/* display: none; */
position: relative;
z-index:1;
display: block;
top: 13px;
}
#nav ul li:hover ul #item3 {
/* display: none; */
position: relative;
z-index:0;
display: block;
top: 27px;
}
#nav li ul #item1 {
z-index:100;
display:none;
}
#nav li ul #item2 {
z-index:1;
display:none;
}
#nav li ul #item3 {
z-index:0;
display:none;
}
I also added a margin here to connect the sub menu to the normal menu or else it will act really weird. Your end product can be found here.
I would suggest looking into some specific tutorials on how to create drop down menus with CSS or look into using jQuery with your drop down menu (it will make it more clean and easy to use).
Edit: Here is an update with the sub menus showing, I have also added another sub menu to show you exactly how the items will work and the corresponding CSS to go with it here.
To break down my additions, I will split it up into sections really fast:
Z-Index: This is pretty much the order of what the items will appear in, where the higher the number, the higher on the list it will appear. Here is a resource for more information.
Positioning: I have used a combination of absolute and relative positioning. This is extremely dirty and I don't know if many would recommend the use of this in the applicable web programming world. It would be better to use solely absolute positioning, but this will still get your job done. More information can be found here.
Top: This is pretty self explanatory but it is really the distance from the utmost top object. More information on this can be found here.
How can it be that there are so many answers on this topic and I still can't figure this out? I've been fiddling with the CSS on jsfiddle for hours and I still don't understand why my navigation bar won't center without going into a vertical list.
The html:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='a'>MAKEUP</a>
<ul>
<li><a href='a'>EYES</a></li>
<li><a href='a'>LIPS</a></li>
<li><a href='a'>FACE</a></li>
</ul>
</li>
<li><a href='a'>SKINCARE</a></li>
<li><a href='a'>LIFESTYLE</a></li>
<li><a href='a'>DIY</a></li>
<li><a href='a'>CONTACT</a></li>
</ul>
</div>
and the CSS, I think:
*{
margin:0;
padding:0;
outline:0;
}
.nav {
width:950px;
height:auto;
border-bottom:1px solid #eee;
margin:10px auto 5px;
display:inline-block;
}
.menu {
width:auto;
list-style:none;
font:$pagenavifont;
text-align:center;
margin:0 auto;
}
.menu a {
float:left;
color:#999;
text-decoration:none;
text-transform:uppercase;
width:auto;
line-height:36px;
padding:0 20px;
}
.menu a:hover,li.menuhover a{
color:#111;
}
.menu li {
position:relative;
float:left;
width:auto;
}
.menu li:last-child {
background:none;
}
.menu ul{
display:none;
position:absolute;
top:36px;
left:0;
background:#fbfbfb;
display:none;
list-style:none;
}
.menu ul li{
float:none;
border-top:1px solid #e3e3e3;
border-right:1px solid #e3e3e3;
border-left:1px solid #e3e3e3;
width:auto;
background:none;
}
.menu ul li:last-child {
border-bottom:1px solid #e3e3e3
}
.menu ul li a{
float:none;
display:block;
background:none;
line-height:36px;
min-width:137px;
width:auto;
text-align:left;
padding-left:10px;
color:#444;
}
.menu ul li a:hover{
background:#fdfdfd;
color:#777;
}
I just started my blog today, and so far I've learned that getting rid of floats and putting inline-block might help, but there are so many that I really don't get which code applies to what. Any help is appreciated!
Here's the fiddle link: http://jsfiddle.net/vFDrV/9/
Here's the link to my blog: http://theprettyfoxes.blogspot.com/
if I understand correctly your question, its quite simple.
Add the follow code to your menu css class.
.menu { /* applying to a ul element */
/* ... your code ... */
display: inline-block;
}
You can read more about this at the Mozilla Docs
https://developer.mozilla.org/en-US/docs/Web/CSS/display
What it's going on when we add "inline-block" is this:
The element generates a block element box that will be flowed with
surrounding content as if it were a single inline box (behaving much
like a replaced element would)
Thats all!
remove float from following:
.menu a {
/*float: left;*/
color: #999;
text-decoration: none;
text-transform: uppercase;
width: auto;
line-height: 36px;
padding: 0px 20px;
}
.menu li {
position: relative;
/*float: left;*/
width: auto;
display: inline; /* <- add this */
}
I have been trying quite a few guides on getting sub-menus to work. Some which include JS. Now I'm trying a just css approach but I'm kinda stuck on getting the submenu to work for me.
My code is on fiddle here: http://jsfiddle.net/PLb5K/
To do a basic test I have done
#nav ul li ul {
display: none; }
#nav ul li:hover ul {
display: block;
position: absolute; }
UPDATE
#nav ul:hover .sub {
display: block;
position:absolute;
}
fixes the "not working on hover" issue but any list item will show the sub menu. Please could anyone help on how to make it so only the single parent will show the submenu.
here is a basic html/css example for you:
the fiddle
css
ul {
margin: 0;
padding: 0px 100px 0px 0px;
list-style: none;
line-height: normal;
text-align: center;
}
ul li {
background-color:grey;
display: inline-block;
*display: inline;
padding:4px 8px;
margin:0;
zoom: 1;
}
ul li a{
color: white;
text-decoration:none;
}
ul li ul.sub{
display:none;
position:absolute;
margin-top:4px;
margin-left:-8px;
}
ul li:hover ul.sub{
display:block;
}