Hi i am making a menu,
its built up with UL and LIs
please can you advise me on how i can do the lines after each li and do the indent with that particular bullet image.
Here is the menu i am using if you want to see code: http://www.dnn-menu.com/superfish/Home.aspx
here is an image of the design:
Hi u can make this navi in pure css
example is
HTML
<ul class="navi">
<li>Lorem text here</li>
<li>Lorem text here</li>
<li>Lorem text here</li>
<li>Lorem text here</li>
<li>Lorem text here</li>
<li>Lorem text here</li>
</ul>
Css
ul.navi{
margin:10px 0 0 10px;
width:300px;
}
ul.navi li{
background:#1f1f1f;
display:block;
position:relative;
}
ul.navi li:after{
position:absolute;
content:"";
left:0;
right:0;
bottom:0;
border-bottom:solid 1px #2a2a2a;
border-top:solid 1px #171717;
}
ul.navi li:last-child:after{
position:absolute;
content:"";
left:0;
right:0;
bottom:0;
border:0;
}
ul.navi li a{
display:inline-block;
font-size:14px;
color:#989898;
line-height:45px;
text-decoration:none;
margin-left:20px;
}
ul.navi li a:hover{
color:#fff;
}
and now Live demo click here
http://jsfiddle.net/rohitazad/8abUy/4/
Related
I had everything working fine, then I was cleaning up css and moved some stuff around. Ilost my horizontal menu bar, it all went vertical:$
Ive been tweeking and searched the site for hours and still no luck. Might be a simple error in my code. I am pretty sure its something in css.
Would prefer not to have to use float....
Thanks for your assistance....
I might have a bit more code than need. this is where is got it
http://www.youtube.com/watch?v=PN1iMaVfzfQ
Website:
http://www.enhancedliving.ca/
CSS:
#menu_Box{ /*MENU BOX CONTAINER*/
width: 890px;
height: 100%;
margin: 0 auto;
padding-left: 10px;
}
#menu_Box ul{ /*MENU BOX STYLE*/
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#263A75;
font-size:24px;
font-weight:normal;
padding:0 0 0 10px;
margin:0;
position:relative;
}
.extraStyle{
font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
color:#263A75;
font-size:24px;
font-weight:normal;
padding:0;
margin:0;
}
#menu_Box ul li{
display:inline-block;
}
#menu_Box ul li:hover{
color:#456692;
}
#menu_Box ul li a,visited{
text-align:left;
color:#263A75;
display:block;
padding: 0 0 0 0; /*Padding between titles*/
text-decoration:none;
}
#menu_Box ul li a:hover{
color:#456692;
text-decoration:none;
}
#menu_Box ul li:hover ul{
display:block;
}
/* ############### DROP DOWN MENU BOX ################ */
#menu_Box ul ul{ /*Drop Down Box*/
border: 3px solid rgba(0, 57, 96, .85) ;
display:none;
position:absolute;
background-color: rgba(139, 183, 212, .9);
padding: 3px; /*Padding between list items*/
}
#menu_Box ul ul li{ /*Drop Down Style*/
display: block;
}
#menu_Box ul ul li a,visited{
color:#263A75;
}
#menu_Box ul ul li a:hover{
color:#456692;
}
HTML:
<ul>
<li>Services
<ul>
<li>Psych-K </li>
<li>Food & Environmental Allergy and Sensitivity Testing </li>
<li>Supplement and Nutrition Evaluation </li>
<li>Food Value Testing </li>
</ul>
</li> <p class="extraStyle">::</p>
<li>Sessions </li> <p class="extraStyle">::</p>
<li>Biography </li> <p class="extraStyle">::</p>
<li>Health Topics </li><p class="extraStyle">::</p>
<li>Favorite Products </li><p class="extraStyle">::</p>
<li>Contact </li>
</ul>
Change the
<p class="extraStyle">::</p>
Into
<span class="extraStyle">::</span>
I am trying to center my menu bar with my logo in the middle. right now everything is floating but it wont center to the middle of the page. Also when it is centered i need the background image that i placed on the left and right side of the logo to resize according to the width of the page - here is a link to how it looks live - Menu Test
on my website i still have the original menu I created where I placed the logo behind the menu bar and set a longer width so that the background would stretch but it won't auto adjust because of it.... Current Menu
I know my code is not perfect so please just bear with me
html
<div id="access">
<div class="menu-container">
<ul id="menu-left" class="menu">
<li class="menu-item">
Home
</li>
<li class="menu-item">
About
</li>
<li class="menu-item">
Services
</li>
</ul><!--END of menu-navigation-left-->
<ul id="menu-center">
<li class="menu-item">
<img src="images/logo.png" alt="Menu">
</li>
</ul> <!--close div center-->
<ul id="menu-right" class="menu">
<li class="menu-item">
Blog
</li>
<li class="menu-item">
Contact
</li>
<li class="menu-item">
Portfolio
</li>
</ul><!--END of menu-navigation-left-->
</div><!--END of menu-navigation-container-->
</div><!--END of access-->
css
header {
position:fixed;
}
#access {
width:100%;
overflow:hidden;
left:50%;
}
#access ul.menu{
display: inline-block;
}
#access ul {
}
#access ul a{
display:block;
}
#access ul#menu-left {
height:120px;
background-image:url(../images/menu.png);
}
#access ul#menu-center {
height:120px;
}
#access ul#menu-right {
height:120px;
background-image:url(../images/menu.png);
}
ul, li {
margin:0px;
padding:0px;
list-style:none;
float:left;
display:block;
}
#access a {
display: block;
font-size: 16px;
line-height: 15px;
padding: 13px 10px 12px 10px;
text-transform: titlecase;
text-decoration: none;
font:"Mc1regular", Arial, sans-serif;
}
a:link{
color:#fff;
}
a:visited{
color:#fff;
}
This should sort out your alignment issues.. just replace with your specs. I would just have one menu and centre it.
PLEASE NOTE, YOUR HEADER POSITION IS FIXED> position:relative would be better..
div.container {
width: 1160px;
margin: auto;
margin-top: -1;
margin-bottom: -1;
padding: 0;
padding-top: 10px;
background-color: #2d2d2d;
}
div.box {
margin: auto;
margin-top: 20px;
margin-bottom: 20px;
padding: 10px;
padding-bottom: 20px;
border: solid 1px #A29060;
background-color: #000;
overflow: hidden;
width: 940px;
}
div.top {
text-align: left;
margin: auto;
margin-left: 20px;
padding-top: 12px;
padding-bottom: 11px;
font-weight: normal;
font-size: 14px;
overflow: hidden;
width: 980px;
text-transform: uppercase;
}
ul {
list-style-type: none;
margin: 0;
padding: 0;
}
li {
float: left;
padding-right: 20px;
}
a {
display: block;
color: #a29060;
text-decoration: none;
}
<div class="container">
<div class="box">
<div class="top">
<ul >
<li>Contact</li>
<li>Policies</li>
<li><img class="logo" src="images/logo.jpg" alt="logo" /></li>
<li>Policies</li>
</ul>
</div>
see this fiddle
http://jsfiddle.net/yvytty/RJ4Yp/
You can also have a look at this (it's not finished) but it has the basic layout sorted, menus etc
https://www.yve3.com/index.html
This is also a link to a great forum, HTML.net. They give you good opinions of your site and have a lot of expertise (just like here)
http://www.html.net/forums/
I have a very odd glitch that only happens in firefox. The header div of my site will disappear from view only after the user has scrolled down the page and then moved the mouse on to the header nav. I have been searching for a couple of hours now on what piece of code I may be missing.
The site is not super dynamic as it does need to be so I don't think there is any Jquery/javascript with improperly formatted event listeners or anything. What I suspect the problem to be is something in the CSS code. I have done 3 different things for this site that I normally do not do. I used an absolutely positioned div, I used z-index and I constructed a CSS only nested menu structure in the nav.
While none of these things by themselves (except the ap div) is truly offensive in nature, I wonder if the combination of these 3 items is causing me a problem?
Here is the page structure for the header div and the governing CSS
<div id="header">
<div id="headwrap">
<div id="logo">
<img src="images/logo.png" height="35px" width="35px"/>
</div> <!-- end logo -->
<div id="logotitle" class="ie">
Cambridge Companies
</div> <!-- end logotitle -->
<div class="headnav">
<ul id="top-menu">
<li><span>Home</span></li>
<li> <span>Company</span>
<ul class="sub-menu">
<li>Overview</li>
<li>Our Mission</li>
<li>Meet the Team</li>
</ul>
</li>
<li> <span>Investments</span>
<ul class="sub-menu">
<li>Completed</li>
<li>Opportunities</li>
</ul>
</li>
<li><span>Services</span></li>
<li><span>Careers</span>
<ul class="sub-menu">
<li>VP of Business Development</li>
<li>Assistant</li>
<li>Intern</li>
</ul>
</li>
<li><span>Contact</span></li>
</ul>
</div> <!-- end headnav -->
<div id="address" align="right">
<strong>1.888.615.6166</strong><br/>9075 W. Diablo Dr., Las Vegas, NV 89148
</div> <!-- end address -->
</div> <!-- end headwrap -->
</div> <!-- end header -->
#header{
position:absolute;
/*background-color:#F90;*/ /* position testing */
background:url(../images/navigation-background.png) repeat;
width:100%;
height:50px;
z-index:2;
}
#logo{
display:inline-block;
padding-top:6px;
margin-left:80px;
}
#logotitle{
position:absolute;
/*background-color:#CC9900;*/ /* position testing */
display:inline-block;
color:#FFFFFF;
height:26px;
width:auto;
font-size:26px;
font-family:Arial, Helvetica, sans-serif;
margin-left:4px;
margin-top:10px;
}
.headnav{
/*background-color:#0099FF;*/ /* position testing */
display:inline-block;
/*margin-left:12px;*/
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
letter-spacing:1pt;
height:10px;
padding-bottom:24px;
margin-left:280px;
}
.navitem{
display:inline-block;
color:#ccb38b;
}
.navitem a:link{color:#ccb38b;}
.navitem a:visited{color:#ccb38b;}
.navitem a:hover{color:#FFF;}
.navitem a:active{color:#ccb38b;}
#address{
/*background-color:#99FF33;*/ /* position testing */
display:inline-block;
float:right;
margin-right:80px;
margin-top:9px;
font-family:Arial, Helvetica, sans-serif;
font-size:14px;
color:#ccb38b;
}
#top-menu {
display:block;
float:left;
list-style:none;
margin:0;
padding:0;
}
#top-menu > li {
float:left;
display:block;
height:52px;
}
#top-menu > li > a {
color:#ccb38b;
font-size:12px;
text-decoration:none;
display:block;
}
#top-menu > li > a > span {
border-left:1px solid #ccb38b;
display:inline-block;
padding:0 12px;
height:12px;
margin:12px 0;
}
#top-menu > li:first-child > a > span {
border-left:0;
}
#top-menu > li:hover > a > span {
color:#fff;
text-decoration:none;
}
#top-menu li:hover .sub-menu {
display:block;
}
#top-menu .sub-menu {
position:absolute;
width:210px;
background:transparent url(../images/navigation-background.png) repeat;
list-style:none;
padding:0;
display:none;
margin:0;
margin-top:7px;
}
#top-menu .sub-menu a {
display:block;
padding:10px;
color:#ccb38b;
font-size:12px;
text-decoration:none;
}
#top-menu .sub-menu a:hover {
text-decoration:none;
color:#fff;
}
Any help, suggestions, comments on cleaning up my code or general thoughts are appreciated.
!UPDATE! -- I have solved the issue. At first I believed it was the z-index, however, changing this only made things worse. The problem was the positioning on the #header element. Since I had positioned it as "absolute" it was being rendered wrong. The fix was to change it to the following:
#header{
position:fixed; /* note that this changed to fixed instead of absolute */
/*background-color:#F90;*/ /* position testing */
background:url(../images/navigation-background.png) repeat;
width:100%;
height:50px;
z-index:2;
}
Once I changed the positioning, the header operated as designed. It sticks nicely to the top of the window regardless of scroll and does not disappear in firefox as previously reported.
I feel dumb that I did not think of this sooner, but hey that's how you learn right?
I hope this helps anyone else having the same problem.
Basically the navigation bar on my page is aligned to right hand side of the page with the logo on its left. Because of this when the drop down for the far right item appears, it drifts off the right side of the page and looks messy. Especially as it's using an aplha background.
Anyway, here is my code at the moment..
HTML:
<ul class="Nav2">
<li>
Category 1
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 2
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 3
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 4
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
<li>
Category 5
<ul>
<li>Item 1</li>
<li>Item 2</li>
</ul>
</li>
</ul>
CSS:
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2 li {
float:right;
}
ul.Nav2 li a {
font-family:"Orator Std";
font-size:16px;
color:#000;
display:block;
width:auto;
height:20px;
line-height:20px;
border-left:1px Solid rgba(0,0,0,255);
background-color:#CCC;
text-align:center;
text-decoration:none;
opacity:0.6;
padding:0px 10px;
-webkit-transition:all 0.2s ease-in-out;
-moz-transition:all 0.2s ease-in-out;
-ms-transition:all 0.2s ease-in-out;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
background:#FFF;
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
background:#FFF;
}
Basically this is how I WANT it to look....
Category 1 Category 2 Category 3 Category 4 Category 5
Item 1 Item 1 Item 1 Item 1 Item 1
Item 2 Item 2 Item 2 Item 2 Item 2
Rather than...
Category 1 Category 2 Category 3 Category 4 Category 5
Item 1 Item 1 Item 1 Item 1 Item 1
Item 2 Item 2 Item 2 Item 2 Item 2
(It's actually pushed to the right slightly but not centered to the parent <ul> <li>)
The width MUST be set to auto because of the huge range in widths between the text that is gunna be stored in the navigation bar. Some are about 100px and some are nearly 300px
Here's the fixed CSS. Removed and added styles are commented.
ul.Nav2 {
list-style-type:none;
margin:0 auto;
padding:0;
overflow:hidden;
width:auto;
}
ul.Nav2>li {
float:right;
}
ul.Nav2 li a {
font-family:"Orator Std";
font-size:16px;
color:#000;
display:block;
width:auto;
height:20px;
line-height:20px;
border-left:1px Solid rgba(0,0,0,255);
background-color:#CCC;
/*removed
text-align:center;
*/
text-decoration:none;
opacity:0.6;
padding:0px 10px;
;
;
;
-o-transition:all 0.2s ease-in-out;
transition:all 0.2s ease-in-out;
}
ul.Nav2 li a:hover {
opacity:1;
}
ul.Nav2 ul {
list-style:none;
position:absolute;
left:-9999px;
text-align:right;
float:right
/*added*/
display:block;
padding:0;
min-width:9.3ex;
}
ul.Nav2 ul li {
padding-top:1px;
float:none;
}
ul.Nav2 ul a {
white-space:nowrap;
}
ul.Nav2 li:hover ul {
left:inherit;
}
ul.Nav2 li:hover a {
background:#FFF;
text-decoration:none;
}
ul.Nav2 li:hover ul a {
text-decoration:none;
}
ul.Nav2 li:hover ul li a:hover {
background:#FFF;
}
EDIT: Updated CSS based on new restriction.
I am trying to switch out the show and hide functions of jquery for the hoverintent plugin. I want to do this for 2 reasons, number one you can control how long the mouse is over the menu item before the sub item pops up, and number 2 it stops multiple instances from building up. I have been trying since last night to change my code, but I am just not getting this to work...below is my original jquery and html, any help would be greatly appreciated. Thanks ALL!!!
Web Site with Dropdown Menu
http://www.nestudiosonline.com/test.php
Jquery
$(document).ready(function() {
// shows the hidden div in the list
$('#dave').mouseover(function() {
$('#aboutdke').show('200');
});
// hides the hide the div again for that list item
$('#dave').mouseleave(function() {
$('#aboutdke').hide();
}); });
html
<ul id="menu">
<li class="mega"><a class="dkeorg" href="#">DKE.ORG</a></li>
<li class="megamenu" id="dave"><a class="links" href="#">ABOUT DKE</a> <div id="aboutdke">div content </div></li>
<li class="megamenu"><a class="links" href="#">ALUMNI</a></li>
<li class="megamenu"><a class="links" href="#">UNDERGRADUATES</a></li>
<li class="megamenu"><a class="links" href="#">EVENTS</a></li>
<li class="megamenu"><a class="links" href="#">MULTIMEDIA</a></li>
<li class="megamenu"><a class="links" href="#">SHOP DKE</a></li>
</ul>
I did it yay...this is the most simple jquery solution to do a basic drop div with the hoverintent plugin, my html did not have to change at all, ill show my css too....observe
<script type="text/javascript" charset="utf-8">
//<![CDATA[
$(document).ready(function() {
//add hovering class to li's inside of the unordermened with the id menu
function addMega(){
$(this).addClass("hovering");
}
//remove hovering class to li's inside of the unordermened with the id menu
function removeMega(){
$(this).removeClass("hovering");
}
//configuariton for hoverintent plugin, hoveron time, mouse sensitivity, hoveroff time
var megaConfig = {
interval: 300,
sensitivity: 4,
over: addMega,
timeout: 200,
out: removeMega
};
//make list items with the class megamenu have the hoverinter plugin excuted on them
$("li.megamenu").hoverIntent(megaConfig)
});
//]]>
</script>
CSS
ul#menu
{
display:block;
list-style-type:none;
margin:0;
padding:0;
}
ul# menu li
{
display:inline;
position: relative;
}
ul#menu div {
display: none;
}
ul#menu li.mega div {
position: absolute;
}
ul#menu li.hovering div {
display: block;
}
#aboutdke
{
display:block;
color:#FFF;
text-align:left;
font-family:Verdana, Geneva, sans-serif;
font-size:10px;
background-color:#000;
margin:0;
padding-top:10px;
padding-right:10px;
padding-bottom:10px;
padding-left:10px;
border:0px;
width:910px;
height:280px;
float:left;
position:absolute;
z-index:99999;
top:164px;
left:140px;
}
a.links:link
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
a.links:visited
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
/* mouse over link */
a.links:hover
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
/* selected link */
a.links:active
{
display:block;
width:120px;
height:22px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
background-color:#000;
float:left;
}
a.dkeorg:link
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
float:left;
}
a.dkeorg:visited
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:none;
text-align:center;
outline:none;
}
/* mouse over link */
a.dkeorg:hover
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
float:left;
}
/* selected link */
a.dkeorg:active
{
display:block;
width:120px;
height:23px;
padding-top:8px;
padding-left:3px;
padding-bottom:0px;
color:#FFF;
text-decoration:underline;
text-align:center;
outline:none;
float:left;
}