I'll check that site out....problem I've found on doing a google search is I haven't found one that shows exactly what I want...I want submenu to drop down horizontally not vertically.
Thanks
Forums
Get help. Give help. A Community of Web Designers.
CSS Horizontal sub menu help
20 posts • Page 2 of 2 • 1, 2
Re: CSS Horizontal sub menu help
by apples » Thu Nov 27, 2008 3:28 am
- apples
- Posts: 10
- Joined: Tue Nov 25, 2008 12:52 am
Re: CSS Horizontal sub menu help
by MikeC » Thu Nov 27, 2008 11:07 am
http://www.kriesi.at/wp-content/extra_data/suckerfish_tutorial/step4.html
That is an example of what al_m473 suggested. Is that what you want?
That is an example of what al_m473 suggested. Is that what you want?
- MikeC
- Member
- Posts: 72
- Joined: Thu Nov 06, 2008 11:39 pm
Re: CSS Horizontal sub menu help
by apples » Thu Nov 27, 2008 5:10 pm
Sort of....but I want the drop down to go horizontal not straight down. Does that make sense?
Wish I could post the screenshot...won't let me grrr. When I try,, I get this error: Could not upload attachment to ./files/938_4f99751a61d371bc1a6cce9d9e579f69.
Wish I could post the screenshot...won't let me grrr. When I try,, I get this error: Could not upload attachment to ./files/938_4f99751a61d371bc1a6cce9d9e579f69.
- apples
- Posts: 10
- Joined: Tue Nov 25, 2008 12:52 am
Re: CSS Horizontal sub menu help
by MikeC » Thu Nov 27, 2008 5:32 pm
- MikeC
- Member
- Posts: 72
- Joined: Thu Nov 06, 2008 11:39 pm
Re: CSS Horizontal sub menu help
by apples » Thu Nov 27, 2008 6:22 pm
Yes....like that...that's the one I tried to use and manipulate but I kept doing something wrong and couldn't get it to work with what I've already got setup in my css stylesheet
- apples
- Posts: 10
- Joined: Tue Nov 25, 2008 12:52 am
Re: CSS Horizontal sub menu help
by MikeC » Fri Nov 28, 2008 10:42 pm
Ok Al try this:
In between your <head> tags put this:
And where you want your menu to appear, put this:
That should do the trick.
When you are happy with it, you can put everything in seperate files
In between your <head> tags put this:
- Code: Select all
<style type="text/css">
div#navigation-bg {
height:66px;
background: url(images/navigation-bg.gif) 0 0 repeat-x;
}
div#navigation-bg div#navigation {
width:922px;
margin:0 auto;
}
div#navigation-bg div#navigation ul.menu {
padding:0;
float:left;
width:567px;
list-style: none;
}
div#navigation-bg div#navigation ul.menu li {
width:81px;
float:left;
background:url(images/navigation-divider.gif) 100% 0 no-repeat;
}
div#navigation-bg div#navigation ul.menu li a {
width:80px;
height:33px;
display:block;
line-height:33px;
text-align:center;
font-weight:bold;
color:#FAF0C2;
font-size:11px;
}
div#navigation-bg div#navigation ul.menu li a:hover {
background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
div#navigation-bg div#navigation ul.menu li a.selectMenu {
width:80px;
height:33px;
display:block;
line-height:33px;
text-align:center;
font-weight:bold;
color:#FAF0C2;
font-size:11px;
background:url(images/navigation-bg-selected.gif) 0 0 no-repeat;
}
.spacer {
clear: both;
overflow: auto;
}
/*-------------------------- DROP DOWN MENU STARTS --------------------------*/
ul.subNav {
font:normal 11px/12px Arial, Helvetica, sans-serif;
padding:4px 0 0 0;
list-style: none;
}
ul.subNav li {
background:url(images/navigation-dropdown-divider.gif) 0 0 no-repeat;
height:17px;
float:left;
padding:6px 0 0 0;
}
ul.subNav li a {
display:block;
margin:0 22px 0 20px;
color:#84915D;
}
ul.subNav li a:hover {
color:#fff;
}
/*-------------------------- DROP DOWN MENU ENDS --------------------------*/
div#navigation-bg div#navigation a.signup {
width:71px;
height:28px;
display:block;
background:url(images/sign-up-btn.gif) 0 0 no-repeat;
margin:2px 0 0 0;
float:right;
}
div#navigation-bg div#navigation a.signup:hover {
background:url(images/sign-up-btn-selected.gif) 0 0 no-repeat;
}
/***********************************************************************************************
Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
Get this and other scripts at www.dhtmlgoodies.com
You can use this script freely as long as this copyright message is kept intact.
***********************************************************************************************/
body{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
margin-top:0px;
}
.bodyText{
padding-left:10px;
padding-right:10px;
border-top:1px solid #000000;
}
.bodyText p{
margin-top:5px;
}
#mainContainer{
width:760px;
height:600px;
border:1px solid #000000;
margin:0 auto;
background-image:url('../../images/heading3.gif') #f00;
background-repeat:no-repeat;
padding-top:85px;
}
#mainMenu{
background-color: #FFF; /* Background color of main menu */
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Fonts of main menu items */
font-size:0.9em; /* Font size of main menu items */
border-bottom:1px solid #000000; /* Bottom border of main menu */
height:30px; /* Height of main menu */
position:relative; /* Don't change this position attribute */
}
#mainMenu a{
padding-left:5px; /* Spaces at the left of main menu items */
padding-right:5px; /* Spaces at the right of main menu items */
font-weight:bold;
/* Don't change these two options */
position:absolute;
bottom:-2px; /* Change this value to -2px if you're not using a strict doctype */
}
#submenu{
font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif; /* Font of sub menu items */
background-color:#E2EBED; /* Background color of sub menu items */
width:100%; /* Don't change this option */
}
#submenu div{
white-space:nowrap; /* Don't change this option */
}
/*
Style attributes of active menu item
*/
#mainMenu .activeMenuItem{
/* Border options */
border-left:1px solid #000000;
border-top:1px solid #000000;
border-right:1px solid #000000;
background-color: #E2EBED; /* Background color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
#mainMenu .activeMenuItem img{
position:absolute;
bottom:0px;
right:0px;
}
/*
Style attributes of inactive menu items
*/
#mainMenu .inactiveMenuItem{
color: #000; /* Text color */
cursor:pointer; /* Cursor like a hand when the user moves the mouse over the menu item */
}
#submenu a{
text-decoration:none; /* No underline on sub menu items - use text-decoration:underline; if you want the links to be underlined */
padding-left:5px; /* Space at the left of each sub menu item */
padding-right:5px; /* Space at the right of each sub menu item */
color: #000; /* Text color */
font-size:0.9em;
}
#submenu a:hover{
color: #FF0000; /* Red color when the user moves the mouse over sub menu items */
}
</style>
<script type="text/javascript">
/***********************************************************************************************
Copyright (c) 2005 - Alf Magne Kalleland post@dhtmlgoodies.com
Get this and other scripts at www.dhtmlgoodies.com
You can use this script freely as long as this copyright message is kept intact.
***********************************************************************************************/
var menuAlignment = 'left'; // Align menu to the left or right?
var topMenuSpacer = 0; // Horizontal space(pixels) between the main menu items
var activateSubOnClick = false; // if true-> Show sub menu items on click, if false, show submenu items onmouseover
var leftAlignSubItems = false; // left align sub items t
var activeMenuItem = false; // Don't change this option. It should initially be false
var activeTabIndex = 0; // Index of initial active tab (0 = first tab) - If the value below is set to true, it will override this one.
var rememberActiveTabByCookie = true; // Set it to true if you want to be able to save active tab as cookie
var MSIE = navigator.userAgent.indexOf('MSIE')>=0?true:false;
var Opera = navigator.userAgent.indexOf('Opera')>=0?true:false;
var navigatorVersion = navigator.appVersion.replace(/.*?MSIE ([0-9]\.[0-9]).*/g,'$1')/1;
/*
These cookie functions are downloaded from
http://www.mach5.com/support/analyzer/manual/html/General/CookiesJavaScript.htm
*/
function Get_Cookie(name) {
var start = document.cookie.indexOf(name+"=");
var len = start+name.length+1;
if ((!start) && (name != document.cookie.substring(0,name.length))) return null;
if (start == -1) return null;
var end = document.cookie.indexOf(";",len);
if (end == -1) end = document.cookie.length;
return unescape(document.cookie.substring(len,end));
}
// This function has been slightly modified
function Set_Cookie(name,value,expires,path,domain,secure) {
expires = expires * 60*60*24*1000;
var today = new Date();
var expires_date = new Date( today.getTime() + (expires) );
var cookieString = name + "=" +escape(value) +
( (expires) ? ";expires=" + expires_date.toGMTString() : "") +
( (path) ? ";path=" + path : "") +
( (domain) ? ";domain=" + domain : "") +
( (secure) ? ";secure" : "");
document.cookie = cookieString;
}
function showHide()
{
if(activeMenuItem){
activeMenuItem.className = 'inactiveMenuItem';
var theId = activeMenuItem.id.replace(/[^0-9]/g,'');
document.getElementById('submenu_'+theId).style.display='none';
var img = activeMenuItem.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='none';
}
var img = this.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='inline';
activeMenuItem = this;
this.className = 'activeMenuItem';
var theId = this.id.replace(/[^0-9]/g,'');
document.getElementById('submenu_'+theId).style.display='block';
if(rememberActiveTabByCookie){
Set_Cookie('dhtmlgoodies_tab_menu_tabIndex','index: ' + (theId-1),100);
}
}
function initMenu()
{
var mainMenuObj = document.getElementById('mainMenu');
var menuItems = mainMenuObj.getElementsByTagName('A');
if(document.all){
mainMenuObj.style.visibility = 'hidden';
document.getElementById('submenu').style.visibility='hidden';
}
if(rememberActiveTabByCookie){
var cookieValue = Get_Cookie('dhtmlgoodies_tab_menu_tabIndex') + '';
cookieValue = cookieValue.replace(/[^0-9]/g,'');
if(cookieValue.length>0 && cookieValue<menuItems.length){
activeTabIndex = cookieValue/1;
}
}
var currentLeftPos = 15;
for(var no=0;no<menuItems.length;no++){
if(activateSubOnClick)menuItems[no].onclick = showHide; else menuItems[no].onmouseover = showHide;
menuItems[no].id = 'mainMenuItem' + (no+1);
if(menuAlignment=='left')
menuItems[no].style.left = currentLeftPos + 'px';
else
menuItems[no].style.right = currentLeftPos + 'px';
currentLeftPos = currentLeftPos + menuItems[no].offsetWidth + topMenuSpacer;
var img = menuItems[no].getElementsByTagName('IMG');
if(img.length>0){
img[0].style.display='none';
if(MSIE && !Opera && navigatorVersion<7){
img[0].style.bottom = '-1px';
img[0].style.right = '-1px';
}
}
if(no==activeTabIndex){
menuItems[no].className='activeMenuItem';
activeMenuItem = menuItems[no];
var img = activeMenuItem.getElementsByTagName('IMG');
if(img.length>0)img[0].style.display='inline';
}else menuItems[no].className='inactiveMenuItem';
if(!document.all)menuItems[no].style.bottom = '-1px';
if(MSIE && navigatorVersion < 6)menuItems[no].style.bottom = '-2px';
}
var mainMenuLinks = mainMenuObj.getElementsByTagName('A');
var subCounter = 1;
var parentWidth = mainMenuObj.offsetWidth;
while(document.getElementById('submenu_' + subCounter)){
var subItem = document.getElementById('submenu_' + subCounter);
if(leftAlignSubItems){
// No action
}else{
var leftPos = mainMenuLinks[subCounter-1].offsetLeft;
document.getElementById('submenu_'+subCounter).style.paddingLeft = leftPos + 'px';
subItem.style.position ='absolute';
if(subItem.offsetWidth > parentWidth){
leftPos = leftPos - Math.max(0,subItem.offsetWidth-parentWidth);
}
subItem.style.paddingLeft = leftPos + 'px';
subItem.style.position ='static';
}
if(subCounter==(activeTabIndex+1)){
subItem.style.display='block';
}else{
subItem.style.display='none';
}
subCounter++;
}
if(document.all){
mainMenuObj.style.visibility = 'visible';
document.getElementById('submenu').style.visibility='visible';
}
document.getElementById('submenu').style.display='block';
}
window.onload = initMenu;
</script>
And where you want your menu to appear, put this:
- Code: Select all
<div id="navigation-bg">
<div id="navigation" class="menu">
<a href="#" class="signup"></a> <br class="spacer" />
<!-- This is the start of the menu -->
<div id="mainMenu">
<a>Home</a>
<a>About</a>
<a>Voice</a>
<a>Internet</a>
<a>Assistance</a>
<a>Links & News</a>
<a>Contact</a>
</div>
<div id="submenu">
<!-- The first sub menu -->
<div id="submenu_1">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>
<!-- Second sub menu -->
<div id="submenu_2">
<a href="#">Phone</a>
<a href="#">Email</a>
<a href="#">Knowledge base</a>
</div>
<!-- Third sub menu -->
<div id="submenu_3">
<a href="#">History</a>
<a href="#">The team</a>
<a href="#">Contact us</a>
<a href="#">Visions</a>
</div>
<!-- Fourth sub menu -->
<div id="submenu_4">
<a href="#">Patches</a>
<a href="#">Whitepapers</a>
<a href="#">Tab menu</a>
<a href="#">Color picker</a>
<a href="#">Window scripts</a>
<a href="#">Games</a>
</div>
<div id="submenu_5">
<a href="#">Patches</a>
<a href="#">Whitepapers</a>
<a href="#">Tab menu</a>
<a href="#">Color picker</a>
<a href="#">Window scripts</a>
<a href="#">Games</a>
</div>
<div id="submenu_6">
<a href="#">Patches</a>
<a href="#">Whitepapers</a>
<a href="#">Tab menu</a>
<a href="#">Color picker</a>
<a href="#">Window scripts</a>
<a href="#">Games</a>
</div>
<div id="submenu_7">
<a href="#">Patches</a>
<a href="#">Whitepapers</a>
<a href="#">Tab menu</a>
<a href="#">Color picker</a>
<a href="#">Window scripts</a>
<a href="#">Games</a>
</div>
</div>
<br class="spacer" />
</div>
</div>
That should do the trick.
When you are happy with it, you can put everything in seperate files
- MikeC
- Member
- Posts: 72
- Joined: Thu Nov 06, 2008 11:39 pm
Re: CSS Horizontal sub menu help
by MikeC » Fri Nov 28, 2008 10:44 pm
Incase it isn't obvious, alter this:
<div id="mainMenu">
<a>Home</a>
<a>About</a>
<a>Voice</a>
<a>Internet</a>
<a>Assistance</a>
<a>Links & News</a>
<a>Contact</a>
</div>
To include whatever you want your top level menu items to be. For each of those there needs to be a seperate sub menu, alter what appears in the sub menus by editing this:
<div id="submenu_1">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>
<div id="mainMenu">
<a>Home</a>
<a>About</a>
<a>Voice</a>
<a>Internet</a>
<a>Assistance</a>
<a>Links & News</a>
<a>Contact</a>
</div>
To include whatever you want your top level menu items to be. For each of those there needs to be a seperate sub menu, alter what appears in the sub menus by editing this:
<div id="submenu_1">
<a href="#">Product 1</a>
<a href="#">Product 2</a>
<a href="#">Product 3</a>
</div>
- MikeC
- Member
- Posts: 72
- Joined: Thu Nov 06, 2008 11:39 pm
Re: CSS Horizontal sub menu help
by apples » Sat Nov 29, 2008 12:52 am
Thanks Mike
I'll try this out on Monday when I get back in the office
I'll try this out on Monday when I get back in the office
- apples
- Posts: 10
- Joined: Tue Nov 25, 2008 12:52 am
Re: CSS Horizontal sub menu help
by apples » Mon Dec 01, 2008 5:39 pm
Tested it out...VERY close, this is about as far as I got as well. The problem being, as soon as I put the information where I want the menu to appear, it's overwriting what I've stated it to appear like. It's looking just like the one from dhtmlgoodies.com My images, fonts, colors, etc are not used 
How can I redirect it to look at the css it should be
How can I redirect it to look at the css it should be- apples
- Posts: 10
- Joined: Tue Nov 25, 2008 12:52 am
Re: CSS Horizontal sub menu help
by MikeC » Mon Dec 01, 2008 11:10 pm
You need to go through the CSS from DHTML goodies that I posted, and change that to match your own styles.
- MikeC
- Member
- Posts: 72
- Joined: Thu Nov 06, 2008 11:39 pm
20 posts • Page 2 of 2 • 1, 2
Return to CSS Help & Troubleshooting
Who is online
Users browsing this forum: Google [Bot], Yahoo [Bot] and 2 guests