I am trying to create a sliding menu docked at the top right corner of the screen, everything seems ok, except the menu isn't sliding as intended.
HTML:
<nav class="social-nav">
<ul>
<li class="twitter"><img src="images/twitter-up.jpg" /> Follow us on Twitter</li>
<li class="fb"><img src="images/fb-up.jpg" /> Like our Facebook page</li>
<li class="insta"><img src="images/insta-up.jpg" /> Follow us on Instagram</li>
<li class="mail"><img src="images/mail-up.jpg" /> Send us a mail</li>
</ul>
</nav>
css:
body {background:#efefef; margin:0; padding:0;}
.social-nav {
position:absolute;
top:20px;
right:0;
z-index:999;
font:10px Verdana, Geneva, sans-serif;
}
.social-nav ul {padding:0; margin:0;}
.social-nav ul li {
list-style:none;
display: block;
margin: 1px;
width:36px;
text-decoration:none;
transition-duration:0.5s;
-webkit-transition-duration:0.5s;
-moz-transition-duration:10.5s;
}
.social-nav ul li:hover {width:200px;}
.social-nav a{color:rgba(0,0,0,0); display:block; text-decoration:none;width:36px; height:25px; padding:0 0 15px 0;}
.social-nav a:hover{color:rgba(255,255,255,1); display:block; width:200px;}
.social-nav .twitter{background:#00acee;}
.social-nav .fb{ background:#3b5999;}
.social-nav .insta{ background:#5280a4;}
.social-nav .mail a{ background:#fff; color:rgba(0,0,0,0);}
.social-nav .mail a:hover { background:#fff; color:rgba(0,0,0,0);}
Cant comment, so I updated your fiddle..
http://jsfiddle.net/2p6h7xq0/1/
.social-nav:hover li{ width: 200px}
.social-nav li:hover a{color:rgba(255,255,255,1); display:block; width:200px;}
Related
I am trying to center my nav bar. I checked my sites but nothing works
and I'm completely stumped as to why it won't center, here is my navigation bar HTML that I want to center:
<div class='nav'>
<ul class='menu' id='menu'>
<li><a expr:href='data:blog.homepageUrl'>home</a></li>
<li><a class='drop-ctg' href='#'>PORTFOLIO</a>
<ul>
<li><a href='http://effectsforshare.blogspot.com/p/trailer.html'>TRAILER</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/motion-graphics.html'>MOTION GRAPHICS</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/trapcode-particular.html'>TRAPCODE PARTICULAR</a></li>
</ul>
</li>
<li><a href='http://effectsforshare.blogspot.com/'>TEMPLATES</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/my-blog.html'>MY BLOG</a></li>
<li><a href='http://effectsforshare.blogspot.com/p/contact-me.html'>CONTACT ME</a></li>
</ul>
</div>
and here is the CSS
*{
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 would give you a link to the page but it's being done in Dreamweaver and is not up yet. The logobar.jpg is the logo for the webpage. I love how it looks, but it needs to be centered and not be cut off or taken to the next line when I shrink my screensize.
I tried each of float: right, float: left, and float: none on almost all of the classes; text-align: center on each class on the html side; I have tried align=center on each class; display: inline, inline-block on ul and li classes.
Thank you for your help!
On your .menu class, you do have text-align:center set. We can certainly use that to center the child nodes.
So within your .menu li css property, add display:inline-block and remove the floats. This will center your list items.
See the fiddle: http://jsfiddle.net/RGREA/
<style>
div.nav{margin: 3px auto;}
</style>
basically i'm trying to create a navigation bar and I'm trying to position two (and more) li elements next to each other, I've tried to figure it out but can't seem to do it???
css is below.... html is below css
don't even know whether i've laid it out correctly, if you know a tutorial or something to do the same thing let me know I've spent days figuring out how to set it up correctly......
CSS
li {
list-style-type:none;
list-style:none;
background:clear;
padding:0;
margin:0;
}
ul {
list-style-type:none;
list-style:none;
margin:0;
padding:0;
background-color:clear;
}
li.nav a {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:green;
padding:10px;
margin:0;
color:#FF0;
float:none;
}
li.nav a:hover {
text-align:center;
font-family:"Helvetica";
font-weight:lighter;
text-decoration:none;
display:inline;
background-color:blue;
padding:10px;
margin:0;
color:#0FF;
}
li.sub a {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}
li.sub a:hover {
position:relative;
top:2px;
background:pink;
display:block;
margin:0;
padding:10px;
color:red;
width:100px;
}
HTML
<li class="nav">Community
<ul>
<li class="sub">Third Age</li>
<li class="sub">Tide Timetables</li>
<li class="sub">Schools</li>
<li class="sub">Religion</li>
<li class="sub">Clubs+Societies</li>
<li class="sub">Courses</li>
<li class="sub">The Council</li>
<li class="sub">Culture</li>
</ul>
</li>
<!--END OF COMMUNITY SECTION-->
<!--START OF EVENTS NAVIGATION BUTTON AND SUBMENU-->
<li class="nav">Events
<ul>
<li class="sub">Festivals</li>
<li class="sub">Family</li>
<li class="sub">Music</li>
<li class="sub">Comedy</li>
<li class="sub">Theatre</li>
<li class="sub">Exhibitions</li>
<li class="sub">Film</li>
<li class="sub">Literature</li>
</ul>
</li>
<!--END OF EVENTS SECTION-->
Try to add this lines in your css.
li.nav{display:inline-block;position:absolute;}
li.nav:nth-child(2)
{margin-left:140px;}
OR
HTML
<div class="main-navigation">
<nav class="navigation">
<ul>
<li>1
<ul class="sub-menu"><li>1a</li><li>1b</li></ul>
</li>
<li>2
<ul class="sub-menu"><li>2a</li><li>2b</li></ul>
</li>
<li>3</li>
<li>4</li>
</ul>
</nav>
</div>
CSS
nav.navigation{
width: 75%;
height:50px;
}
nav ul ul.sub-menu{
display: none;
margin-left:-40px;
margin-top:-10px;
}
nav ul li:hover > ul.sub-menu{
display: block;
}
nav ul{
height:50px;
list-style:none;
padding: 3px 0 0 0;
position: relative;
text-transform: uppercase;
}
nav ul:after{
content:"";
clear:both;
display:block;
}
nav ul li{
float: left;
padding:10px 30px;
background:yellow;
margin-left:5px;
}
nav ul ul.sub-menu{
background-color: #fcfcfc;
padding: 0;
position: absolute;
z-index:100;
top: 100%;
}
nav ul ul.sub-menu li{
float: none;
margin-top: -3px;
height:30px;
background-color:green;
}
The DEMO is here
add float:left; to the li-items.
li
{
float:left;
}
DEMO
you can use display:inline-block level property to all li element.
I made a drop down menu, which works fine for top level items.
But I dunno what CSS to add for second level menu items, to be move them to the right side of the hovered item.
Here is my HTML content:
<ul class="menu">
<li><a href="#" >item1</a></li>
<li>item2</li>
<li>item3
<ul>
<li>subitem1</li>
<li>subitem2</li>
<li>subitem3
<ul>
<li>subsubitem1</li>
<li>subsubitem2</li>
</ul>
</li>
<li>subitem4</li>
<li>subitem5</li>
</ul>
</li>
<li>item4</li>
<li>item5</li>
</ul>
and my actual CSS:
.menu {
border:none;
border:0px;
margin:0px;
padding:0px;
font: 67.5%"Lucida Sans Unicode", "Bitstream Vera Sans", "Trebuchet Unicode MS", "Lucida Grande", Verdana, Helvetica, sans-serif;
font-size:14px;
font-weight:bold;
}
.menu ul {
background:#333333;
height:35px;
list-style:none;
margin:0;
padding:0;
}
.menu li {
float:left;
padding:0px;
}
.menu li a {
background:#333333 url("seperator.gif") bottom right no-repeat;
color:#cccccc;
display:block;
font-weight:normal;
line-height:35px;
margin:0px;
padding:0px 25px;
text-align:center;
text-decoration:none;
}
.menu li a:hover, .menu ul li:hover a {
background: #2580a2 url("hover.gif") bottom center no-repeat;
color:#FFFFFF;
text-decoration:none;
}
.menu li ul {
background:#333333;
display:none;
height:auto;
padding:0px;
margin:0px;
border:0px;
position:absolute;
width:225px;
z-index:200;
/*top:1em;
/*left:0;*/
}
.menu li:hover ul {
display:block;
}
.menu li li {
background:url('sub_sep.gif') bottom left no-repeat;
display:block;
float:none;
margin:0px;
padding:0px;
width:225px;
}
.menu li:hover li a {
background:none;
}
.menu li ul a {
display:block;
height:35px;
font-size:12px;
font-style:normal;
margin:0px;
padding:0px 10px 0px 15px;
text-align:left;
}
.menu li ul a:hover, .menu li ul li:hover a {
background:#2580a2 url('hover_sub.gif') center left no-repeat;
border:0px;
color:#ffffff;
text-decoration:none;
}
jsfiddle
I'm trying to do a submenu of a submenu of a list menu and told that this may work but i dont know how to add it to css. and weather or not the styles would apply to it if its put into css.
[SOLVED]
Okay, so i managed to solve this ( and now I just have to style widths and hovers ). What I Did was chuck in the css from the answer below, added in this css aswell
.tabs .widget ul, .tabs .widget ul {
margin: 0;
padding: 0;
overflow: visible;
list-style: none;
}
For some reason it was set to { overflow:hidden ; } (wtf!) so i changed that and it seemed to overflow correctly now.
In the menu html, I changed
<ul>
<li><a href="#" >item1</a></li>
....
</ul>
to
<ul class="menu_top">
<li><a href="#" >item1</a></li>
....
</ul>
on line one of the given html.
Now all that I need to do is style {width:225px; } and change the :hover element, thanks for everyones help!
You can use the following CSS:
ul.menu_top {
float:left;
width:70%;
margin: 8px 100px 0 0;
border-radius:4px;
background-color: #c4092a;
list-style-type: none;
z-index:+1;
}
ul.menu_top li {
float: left;
position: relative;
margin: 4px 2em 4px 4px;
padding: 0;
}
ul.menu_top li ul {
visibility: hidden;
position: absolute;
top:100%;
left:0px;
padding:0.5em;
list-style-type: none;
white-space:nowrap;
background-color: #c4092a;
border: 1px solid white;
border-radius:4px;
z-index:+1;
}
ul.menu_top li:hover > ul {
visibility: visible;
z-index: +2;
}
ul.menu_top li ul li {
padding: 0;
margin: 12px 4px;
float:none;
border:0;
min-width:3em;
}
ul.menu_top li ul li ul {
top:0;
left:99%;
}
ul.menu_top a {
background-color:#c4092a;
color:white;
text-decoration:none;
padding:4px;
font-size:18px
}
ul.menu_top a:hover, ul.menu_top a.haschildren.childselected, ul.menu_top a.selected {
background-color:white;
color:blue;
text-decoration:none;
}
ul.menu_top li a.haschildren:after {
content:"\00A0\00A0\25BC";
}
a {
color:#0000aa;
background-color:inherit;
}
body, ul, li { /* normalize for old browsers*/
margin:0;
padding:0;
}
It's taken from my old question. The .menu_top class is used only for distinguishing between the navigation menu and another unordered lists.
JSFiddle code & result page
I am pretty new on css and I want to learn use css effectively but I have now couple of problems/questions, I want to make grey border under my menu but when I zoom in and out border behave so strangely? Sorry my code is not very clean. And how can I retouch my code for better standing?
HTML
<html>
<head>
<link href="Style.css" rel="stylesheet" type="text/css">
<style type="text/css">
span{
color:#d00000;
text-decoration:underline;
}
#home{
background-color:#0000CC;
}
span{
font-style:italic;
}
</style>
</head>
<body>
<div id="wrapper">
<div id="header">
<ul>
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul>
<li>sub</li>
<li>sub2</li>
</ul>
</li><!---End of DropDown Videos menu--->
<li>link4</li>
<li>link5</li>
</ul><!---End of nav elements--->
<br class="clearFloat">
</div><!---End of header--->
</div><!---End of wrapper--->
<div id="grey">
</body>
</html>
CSS
#wrapper{
float:center;
}
#grey{
border-bottom:250px solid #a0a0a0;
padding:0px;
margin-left:203px;
margin-right:387px;
}
#header{
margin:auto;
padding:0px;
clear:both;
}
#header ul{
margin:0px;
padding:0px;
line-height:30px;
}
#header li{
margin:0px;
padding:0px;
list-style: none;
float:left;
position:relative;
background-color:#000099;
border:1 solid #0000CC;
top:px;
right:-15%;
}
#header ul li a{
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#header ul ul li a{
color:#0000cc;
}
#header ul ul li{
right:0%;
}
#header ul ul{
margin:0px;
padding:0px;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
}
#header ul li:hover ul {
visibility:visible;
opacity:1 ;
}
#header ul li:hover {
background-color:blue;
}
#header ul li:hover a {
color:black;
}
#header ul ul li:hover a {
color:#d00000;
}
.clearfloat{
clear:both;
margin:0px;
padding:0px;
}
Without completely reworking your code, just think of added a bottom border per 'li'...
Remove your id='grey' and add your border-bottom to your #header li {}. Refresh but note how your 'sub' menus then each have a bottom border now. They inherited it, so you then need to turn those off...hence add border-bottom: none to the #header ul ul li declaration.
Now...if we did a quick rework of your code...
HTML
<div id="wrapper">
<div id="header">
<div id="navwrapper">
<ul id="nav">
<li><span>Home</span></li>
<li>link2</li>
<li>link3
<ul class="sub">
<li>sub</li>
<li>sub2</li>
</ul>
</li>
<li>link4</li>
<li>link5</li>
</ul>
</div>
</div>
CSS
html, body { margin:10px;padding:0; }
#wrapper, #header, #navwrapper { margin: 0 auto 0 auto; }
#nav {
padding:0;
margin: 0 auto 0 auto;
line-height:30px;
height:30px;
list-style:none }
#nav li {
border-bottom: solid #a0a0a0 10px;
margin:0;
padding:0;
float:left;
background-color:#000099;
}
#nav a {
text-align:center;
font-family:fantasy;
text-decoration:none;
display:block;
height:30px;
width:150px;
color:black;
}
#nav li:hover { background-color:blue; }
#nav li:hover .sub {
visibility:visible;
opacity: 1;
}
#nav .sub a { color:#00c; }
#nav .sub {
margin:0;
padding:0;
position:absolute;
opacity: 0;
visibility: hidden;
transition: all .1s ease-in;
list-style: none;
}
#nav .sub li { clear:both; border-bottom: none; }
Using more naming conventions with your sub menus is safer than just drilling down through the css. You also need to note that any top-level CSS declaration is inherited by all the children within. Such that if you declare #nav li as being black but want all the 'sub' list elements to be blue, that needs to be stated explicitly...AFTER the initial declaration in the CSS document.
Hope this helped...
I have made a drop down menu for a website I'm creating, it looks nice I think, though there is this one px space between the horizontal nav bar and the vertical drop down bars. When you hover your mouse on the space the vertical menu disappears again and since you sometimes put your mouse on the one px space it's very confusing for the users.
This is my html;
<div class="nav">
<div class="links">
<ul id="dropdown">
<li class="currentpage">
Tetterode
<ul>
<li>Project</li>
<li>Promenade</li>
<li>Brochure</li>
<li>Impressies</li>
</ul>
</li>
<li>
Woningen
<ul>
<li>Oplevering</li>
<li>Impressies</li>
<li>Kavelkaart</li>
</ul>
</li>
<li>
Locatie
<ul>
<li>Ligging</li>
<li>Routplanner</li>
<li>Situatie</li>
</ul>
</li>
<li>
Financiering
<ul>
<li>Hypotheken</li>
<li>Fiscale mogelijkheden</li>
</ul>
</li>
<li>
Contact
<ul>
<li>Makelaars</li>
<li>Gegevens</li>
</ul>
</li>
</ul>
</div>
</div>
And this is my css;
.nav{
width: 100%;
height:50px;
background-image:url("bg.jpg");
background-repeat:repeat;
text-align:center;
padding-bottom:0px;
margin-bottom:0px;
}
.links ul li {
list-style-type: none;
padding-right: 17px;
height:50px;
position:relative;
display:inline-block;
padding-top:0px;
line-height:50px;
padding-left:17px;
text-shadow: 3px 3px 2px rgba(0, 0, 0, 0.50);
margin-top:0px;
}
.links ul li:hover {
height:50px;
background-color:#b2071a;
display:inline-block;
margin:0px;
}
.links a {
text-transform:uppercase;
font-family:helvetica;
font-size:18px;
color:#fff;
display:inline-block;
font-size:20px;
text-decoration:none;
}
.links a:hover {
background-color:transparent;
}
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:0px;
}
#dropdown ul li{
float:none;
}
#dropdown ul a{
white-space:nowrap;
font-size:16px;
}
#dropdown li:hover ul{
left:0;
}
#dropdown li:hover a{
text-decoration:underline;
}
#dropdown li:hover ul a{
text-decoration:none;
}
#dropdown li:hover ul li a:hover{
color:#000;
}
.currentpage{
height:50px;
background-color:#b2071a;
display:inline-block;
}
I don't see any margin/padding that causes the 1 px space and I don't know how to solve this. I hope someone can help me, thank you.
Your code and style sheet are pretty good, easy to read and follow.
A solution is to tweak the top margin of #dropdown ul to -2px as follows:
#dropdown ul{
background-color:#b2071a;
list-style:none;
position:absolute;
left:-9999px;
z-index:20;
font-size:16px;
padding-top:0px;
margin-top:-2px;
}
Negative margins are allowed and can be quite useful. The problem you encountered is quite common in pull-down menus and this fix is a typical one.
For reference, see the fiddle: http://jsfiddle.net/audetwebdesign/Ygn6X/