FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

help needed with css & javascript

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


woundedhealer
I was getting help with a menubar in a different forum, but the person who was helping me was unable to sort out a few problems. This is mostly css.

This is the menubar: http://www.celticawen.frih.net/test/home.php I can't get the "home" link the right size or color. The size was ok until I added the borders in the dropdown part. here's all my coding:

CSS
Code:
body {
margin: 0;
padding: 0;
 
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 10em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
color: #FFFFCC;
background: #663300;
border-width: 2px; border: outset;
border-style: solid;
border-color: #E4D8AF;
margin: 0;
}
#menu dd {
display: none;
border: 1px;
border-style: solid;
border-color: #CFB58D; 
}
#menu li {
text-align: center;
background: #E4D8AF;
color: #663300
}
#menu li a, #menu dt a {
color: #663300;
background: #E4D8AF;
text-decoration: none;
display: block;
height: 100%;
border-width: 1px; border: outset;
border-style: solid;
border-color: #CFB58D;
margin: 0;
}

#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color:#CFB58D;
background: #FFFFCC;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #000;
background-color: #663300;
padding: 5px;
border: 1px #CFB58D;
}


HTML
Code:
<div id="menu">
   <dl>
      <dt onmouseover="javascript:show();"><a href="" title="Return to home">Home</a></dt>
   </dl>
   
   <dl>         
      <dt onmouseover="javascript:show('smenu1');">Mythology</dt>
         <dd id="smenu1" onmouseover="javascript:show('smenu1');" onmouseout="javascript:show('');">
            <ul>
               <li><a href="index.html">sub-menu 1.1</a></li>
               <li><a href="#">sub-menu 1.2</a></li>
               <li><a href="#">sub-menu 1.3</a></li>
               <li><a href="#">sub-menu 1.4</a></li>
               <li><a href="#">sub-menu 1.5</a></li>
               <li><a href="#">sub-menu 1.6</a></li>
            </ul>
         </dd>
   </dl>
   
   
   <dl>   
      <dt onmouseover="javascript:show('smenu2');">Menu 2</dt>
         <dd id="smenu2" onmouseover="javascript:show('smenu2');" onmouseout="javascript:show('');">
            <ul>
               <li><a href="#">sub-menu 2.1</a></li>
               <li><a href="#">sub-menu 2.2</a></li>
               <li><a href="#">sub-menu 2.3</a></li>
               <li><a href="#">sub-menu 2.4</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:show('smenu3');">Menu 3</dt>
         <dd id="smenu3" onmouseover="javascript:show('smenu3');" onmouseout="javascript:show('');">
            <ul>
               <li><a href="#">sub-menu 3.1</a></li>
               <li><a href="#">sub-menu 3.2</a></li>
               <li><a href="#">sub-menu 3.3</a></li>
               <li><a href="#">sub-menu 3.4</a></li>
               <li><a href="#">sub-menu 3.5</a></li>
            </ul>
         </dd>
   </dl>
   
   <dl>   
      <dt onmouseover="javascript:show('smenu4');">Menu 4</dt>
         <dd id="smenu4" onmouseover="javascript:show('smenu4');" onmouseout="javascript:show('');">
            <ul>
               <li><a href="#">sub-menu 4.1</a></li>
               <li><a href="#">sub-menu 4.2</a></li>
               <li><a href="#">sub-menu 4.3</a></li>
            </ul>
         </dd>
   </dl>

</div>


Javascript in head tags

Code:
<script type="text/javascript">
<!--
window.onload=show;
function show(id) {
var d = document.getElementById(id);
   for (var i = 1; i<=10; i++) {
      if (document.getElementById('smenu'+i)) {document.getElementById('smenu'+i).style.display='none';}
   }
if (d) {d.style.display='block';}
}
//-->
</script>


I also wanted to add a 3rd level to some links, if anyone can help with that it would be great.
Azmo
here is a complete working three lvl drop down/ pop-out menu... gotta edit it yourself tho.. since I don't know what you want exactly.. however I can help you with this if you give me all info needed.. I've started by marking up lvl1 - lvl4 so you get the basics of how this menu works.. and ofc you can take out the css and put it in a style sheet...

Code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
   "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>

<head>
<title>Your Site</title>

<style type="text/css">

body {
   font-family: arial, helvetica, serif;
}

#nav, #nav ul { /* all lists */
   padding: 0;
   margin: 0;
   list-style: none;
   line-height: 1;
}

#nav a {
   display: block;
   width: 10em;
}

#nav li { /* all list items */
   float: left;
   width: 10em; /* width needed or else Opera goes nuts */
}

#nav li ul { /* second-level lists */
   position: absolute;
   background: orange;
   width: 10em;
   left: -999em; /* using left instead of display to hide menus because display: none isn't read by screen readers */
}

#nav li ul ul { /* third-and-above-level lists */
   margin: -1em 0 0 10em;
}

#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
   left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul { /* lists nested under hovered list items */
   left: auto;
}

#content {
   clear: left;
   color: #ccc;
}

</style>

<script type="text/javascript"><!--//--><![CDATA[//><!--

sfHover = function() {
   var sfEls = document.getElementById("nav").getElementsByTagName("LI");
   for (var i=0; i<sfEls.length; i++) {
      sfEls[i].onmouseover=function() {
         this.className+=" sfhover";
      }
      sfEls[i].onmouseout=function() {
         this.className=this.className.replace(new RegExp(" sfhover\\b"), "");
      }
   }
}
if (window.attachEvent) window.attachEvent("onload", sfHover);

//--><!]]></script>


</head>

<body>

<ul id="nav">

   <li><a href="#">top menu</a>
      <ul>
         <li><a href="#">lvl2</a>
            <ul>
               <li><a href="#">lvl3</a>
                  <ul>
                     <li><a href="#">lvl4</a></li>
                     <li><a href="#">lvl4</a></li>
                  </ul>
               </li>
               <li><a href="#">lvl3</a>
                  <ul>
                     <li><a href="#">lvl4</a></li>
                  </ul>
               </li>
               <li><a href="#">lvl3</a>
                  <ul>
                     <li><a href="#">lvl4</a></li>
                     <li><a href="#">lvl4</a></li>
                     <li><a href="#">lvl4</a></li>
                     <li><a href="#">lvl4</a></li>
                     <li><a href="#">lvl4</a></li>
                  </ul>
               </li>
               <li><a href="#">lvl3</a>
                  <ul>
                     <li><a href="#">lvl4</a></li>
                  </ul>
               </li>
               <li><a href="#">lvl3</a>
                  <ul>
                     <li><a href="#">lvl4</a></li>
                  </ul>
               </li>
            </ul>
         </li>
         <li><a href="#">Tilefishes</a>
            <ul>
               <li><a href="#">Caulolatilus</a></li>
               <li><a href="#">Lopholatilus</a></li>
               <li><a href="#">Malacanthus</a></li>
            </ul>
         </li>
         <li><a href="#">Bluefishes</a>
            <ul>
               <li><a href="#">Pomatomus</a></li>
               <li><a href="#">Scombrops</a></li>
               <li><a href="#">Sphyraenops</a></li>
            </ul>
         </li>
         <li><a href="#">Tigerfishes</a>
            <ul>
               <li><a href="#">Amniataba</a></li>
               <li><a href="#">Bidyanus</a></li>
               <li><a href="#">Hannia</a></li>
               <li><a href="#">Hephaestus</a></li>
               <li><a href="#">Lagusia</a></li>
               <li><a href="#">Leiopotherapon</a></li>
               <li><a href="#">Mesopristes</a></li>
               <li><a href="#">Pelates</a></li>
               <li><a href="#">Pelsartia</a></li>
               <li><a href="#">Pingalla</a></li>
               <li><a href="#">Rhyncopelates</a></li>
               <li><a href="#">Scortum</a></li>
               <li><a href="#">Syncomistes</a></li>
               <li><a href="#">Terapon</a></li>
            </ul>
         </li>

      </ul>
   </li>

   <li><a href="#">Anabantoidei</a>
      <ul>
         <li><a href="#">Climbing perches</a>
            <ul>
               <li><a href="#">Anabas</a></li>
               <li><a href="#">Ctenopoma</a></li>
            </ul>
         </li>
         <li><a href="#">Labyrinthfishes</a>
            <ul>
               <li><a href="#">Belontia</a></li>
               <li><a href="#">Betta</a></li>
               <li><a href="#">Colisa</a></li>
               <li><a href="#">Macropodus</a></li>
               <li><a href="#">Malpulutta</a></li>
               <li><a href="#">Parosphromenus</a></li>
               <li><a href="#">Pseudosphromenus</a></li>
               <li><a href="#">Sphaerichthys</a></li>
               <li><a href="#">Trichogaster</a></li>
               <li><a href="#">Trichopsis</a></li>
            </ul>
         </li>
         <li><a href="#">Kissing gouramis</a></li>
         <li><a href="#">Pike-heads</a></li>
         <li><a href="#">Giant gouramis</a></li>

      </ul>
   </li>

   <li><a href="#">Gobioidei</a>
      <ul>
         <li><a href="#">Burrowing gobies</a></li>
         <li><a href="#">Dartfishes</a></li>
         <li><a href="#">Eellike gobies</a></li>
         <li><a href="#">Gobies</a></li>
         <li><a href="#">Loach gobies</a></li>
         <li><a href="#">Odontobutidae</a></li>
         <li><a href="#">Sandfishes</a></li>
         <li><a href="#">Schindleriidae</a></li>
         <li><a href="#">Sleepers</a></li>
         <li><a href="#">Xenisthmidae</a></li>
      </ul>
   </li>

</ul>
woundedhealer
Thanks for this. I've been too busy to do any work on the menubar. I'll see what I can do with this over the weekend. As you say, I can put the css into a stylesheet. It'll make it easier to work with.
Azmo
yes.. just place this in a html file and you'll see what it looks like.. and start working from there.. I think you'll figure it out pretty fast, and if you do have any problems with it, just pm me and I'll help you sort it out.
woundedhealer
Azmo wrote:
yes.. just place this in a html file and you'll see what it looks like.. and start working from there.. I think you'll figure it out pretty fast, and if you do have any problems with it, just pm me and I'll help you sort it out.


Thanks. I've got a few minutes to spare right now so I'll copy and paste it and see how I can go with it.
BlueVD
Azmo, quote your sources!
It's the Suckerfish Dropdowns that's up there... http://www.htmldog.com/articles/suckerfish/dropdowns/
Rules are rules!
Azmo
ah yes, sorry.. forgot about that rule.. suckerfish

totaly forgot Sad
woundedhealer
I've spent nearly 5 days trying to sort this out and I realise now that I can't have the menubar the way I want it. The nearest I can get is this:
http://www.celticawen.frih.net/test/home.htm

As you can see, I haven't got it quite right. I can't work out how to get the css for the 'home' and 'contact' links.

Here's the css for it:

Code:

/* CSS Document */
<style type="text/css" media="screen">
<!--
body {
background-image: url(../images/background.gif); background-repeat: repeat;
margin: 0;
padding: 0;
font: 80% verdana, arial, sans-serif;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute; /* Menu position that can be changed at will */
top: 0;
left: 0;
z-index:100;
width: 100%; /* precision for Opera */
}
#menu dl {
float: left;
width: 10em;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
color: #FFFFCC;
background: #663300;
border-width: 2px; border: outset;
border-style: solid;
border-color: #E4D8AF;
margin: 0;
}
#menu dd {
display: none;
border: 1px;
border-style: solid;
border-color: #CFB58D; 
}
#menu li {
text-align: center;
background: #E4D8AF;
color: #663300
}
#menu li a, #menu dt a {
color: #663300;
background: #E4D8AF;
text-decoration: none;
display: block;
height: 100%;
border-width: 1px; border: outset;
border-style: solid;
border-color: #CFB58D;
margin: 0;

}
}
#menu li a:hover, #menu li a:focus, #menu dt a:hover, #menu dt a:focus {
color:#CFB58D;
background: #FFFFCC;
}
#site {
position: absolute;
z-index: 1;
top : 70px;
left : 10px;
color: #ffffcc;
background-color: #663300;
padding: 5px;
border: 1px #CFB58D;
}

/* Style For single level links*/
#link a:link {
   text-align: center;
font-weight: bold;
color: #FFFFCC;
background: #663300;
border-width: 2px; border: outset;
border-style: solid;
border-color: #E4D8AF;
margin: 0;
}
   
#link a:visited {
   text-align: center;
font-weight: bold;
color: #FFFFCC;
background: #663300;
border-width: 1px; border: outset;
border-style: solid;
border-color: #E4D8AF;
margin: 0;
}
#link a:hover {
      text-align: center;
font-weight: bold;
color: #663300;
background: #FFFFCC;
border-width: 1px; border: outset;
border-style: solid;
border-color: #E4D8AF;
margin: 0;
}
#link a:active {
   color: #BD9777;
   text-decoration: none;
   text-transform: uppercase;
   text-decoration: none;
   font-size: xx-small;
   font-weight: bold;
   
}
-->
</style>


I was originally hoping to have 3 levels for my menubar, but I can't get the colors right, and I'm thinking the text for the third level links are going to be too long.

As I'm writing this, I've just had the thought that maybe I could use images for the top level links. That should solve the problem with the 'home' etc, links.
woundedhealer
I've found a menubar that I really like, but I've got a javascript problem. Only one of the links has sub-menus and I need more. I've tried to put in more sub-menus but all I end up doing is knock out the drop-down menu.

These are the codes for the original menu, before I started customising it.

CSS
Code:
div.vert_menu
{
  position: absolute;
  visibility: hidden;
  display: none;
}

div.horz_menu a { display: block; float: left; }
div.vert_menu a { display: block; float: none; }


div.sample1 div.vert_menu { border-bottom: 1px solid black; }

div.sample1 div.horz_menu a,
div.sample1 div.vert_menu a
{
  border:  1px solid black;
  padding: 1px 0px 1px 0px;

  width: 106px;

  background: #FFFFDD;

  text-decoration: none;
  font-family: "Times New Roman", Serif;
  font-weight: 900;
  font-size: 13px;
  color: #008000;
}

div.sample1 div.horz_menu a { margin-right:  -1px; }
div.sample1 div.vert_menu a { margin-bottom: -1px; }

div.sample1 div.horz_menu a:hover,
div.sample1 div.vert_menu a:hover,
div.sample1 div.horz_menu a.active,
div.sample1 div.vert_menu a.active { background: #FFFFEE; }



Html
Code:
<div class="sample1">

<div class="horz_menu">
<a id="sample1_home"      href="javascript:alert('Home'     );">&nbsp;&nbsp;&nbsp;Home</a>
<a id="sample1_products"  href="javascript:alert('Products' );">&nbsp;&nbsp;&nbsp;Products &gt;&gt;</a>
<a id="sample1_downloads" href="javascript:alert('Downloads');">&nbsp;&nbsp;&nbsp;Downloads</a>
<a id="sample1_tips"      href="javascript:alert('Tips'     );">&nbsp;&nbsp;&nbsp;Tips</a>
<br clear="both" />
</div>

<script type="text/javascript">

var submenu_samples  = { "-"                          : "javascript:alert('Samples');",
                         "&nbsp;&nbsp;&nbsp;Sample 1" : "javascript:alert('Sample 1');",
                         "&nbsp;&nbsp;&nbsp;Sample 2" : "javascript:alert('Sample 2');",
                         "&nbsp;&nbsp;&nbsp;Sample 3" : "javascript:alert('Sample 3');" };

var submenu_product2 = { "-"                             : "javascript:alert('Product 2');",
                         "&nbsp;&nbsp;&nbsp;Description" : "javascript:alert('Description');",
                         "&nbsp;&nbsp;&nbsp;Samples &gt;&gt;"
                                                         : submenu_samples,
                         "&nbsp;&nbsp;&nbsp;Purchage"    : "javascript:alert('Purchage');" };

var submenu_products = { "&nbsp;&nbsp;&nbsp;Product 1"    : "javascript:alert('Product 1');",
                         "&nbsp;&nbsp;&nbsp;Product 2 &gt;&gt;"
                                                          : submenu_product2,
                         "&nbsp;&nbsp;&nbsp;Product 3"    : "javascript:alert('Product 3');" };

var menu = { "sample1_products" : submenu_products };

dhtmlmenu_build(menu);

</script>


Javascript
Code:

function at_display(x)
{
  var win = window.open();
  for (var i in x) win.document.write(i+' = '+x[i]+'<br>');
}

// ----- DropDown Control ------------------------------------------------------

var at_timeout = 50;

// ----- Show Aux -----

function at_show_aux(parent, child)
{
  var p = document.getElementById(parent);
  var c = document.getElementById(child);

  p.className        = "active";

  if (c.offsetWidth <= 0)
  {
    c.style.position   = "absolute";
    c.style.visibility = "visible";
    c.style.display    = "block";
  }

  var direction = undefined;
  if (p.parentNode && p.parentNode["at_position"] == "x")
    direction = p.parentNode["at_direction"];

  var top   = (c["at_position"] == "y") ?  p.offsetHeight+2 : 0;
  var left1 = (c["at_position"] == "x") ?  p.offsetWidth +2 : 0;
  var left2 = (c["at_position"] == "x") ? -c.offsetWidth -2 : 0;
  var left3 = (c["at_position"] == "x") ?  p.offsetWidth +2 : 0;

  for (; p; p = p.offsetParent)
  {
    if (p.style.position != 'absolute')
    {
      left1 += p.offsetLeft;
      left2 += p.offsetLeft;
      top   += p.offsetTop;
    }
    left3 += p.offsetLeft;
  }

  if (direction)
  {
    left = (direction == 'right') ? left1 : left2;
    c['at_direction'] = direction;
  }
  else
  {
    left = (left3+c.offsetWidth < document.body.offsetWidth) ? left1 : left2;
    c['at_direction'] = (left3+c.offsetWidth < document.body.offsetWidth) ? 'right' : 'left';
  }

  c.style.position   = "absolute";
  c.style.visibility = "visible";
  c.style.display    = "block";
  c.style.top        = top +'px';
  c.style.left       = left+'px';
}

// ----- Hide Aux -----

function at_hide_aux(parent, child)
{
  document.getElementById(parent).className        = "parent";
  document.getElementById(child ).style.visibility = "hidden";
  document.getElementById(child ).style.display    = "block";
}

// ----- Show -----

function at_show(e)
{
  var p = document.getElementById(this["at_parent"]);
  var c = document.getElementById(this["at_child" ]);

  at_show_aux(p.id, c.id);

  clearTimeout(c["at_timeout"]);
}

// ----- Hide -----

function at_hide()
{
  var c = document.getElementById(this["at_child"]);

  c["at_timeout"] = setTimeout("at_hide_aux('"+this["at_parent"]+"', '"+this["at_child" ]+"')", at_timeout);
}

// ----- Attach -----

function at_attach(parent, child, position)
{
  p = document.getElementById(parent);
  c = document.getElementById(child );

  p["at_child"]    = c.id;
  c["at_child"]    = c.id;
  p["at_parent"]   = p.id;
  c["at_parent"]   = p.id;
  c["at_position"] = position;

  p.onmouseover = at_show;
  p.onmouseout  = at_hide;
  c.onmouseover = at_show;
  c.onmouseout  = at_hide;
}

// ----- DropDown Menu ---------------------------------------------------------

// ----- Build Aux -----

function dhtmlmenu_build_aux(parent, child, position)
{
  document.getElementById(parent).className = "parent";

  document.write('<div class="vert_menu" id="'+parent+'_child">');

  var n = 0;
  for (var i in child)
  {
    if (i == '-')
    {
      document.getElementById(parent).href = child[i];
      continue;
    }

    if (typeof child[i] == "object")
    {
      document.write('<a class="parent" id="'+parent+'_'+n+'">'+i+'</a>');
      dhtmlmenu_build_aux(parent+'_'+n, child[i], "x");
    }
    else document.write('<a id="'+parent+'_'+n+'" href="'+child[i]+'">'+i+'</a>');
    n++;
  }

  document.write('</div>');

  at_attach(parent, parent+"_child", position);
}

// ----- Build -----

function dhtmlmenu_build(menu)
{
  for (var i in menu) dhtmlmenu_build_aux(i, menu[i], "y");
}


You can view the menubar here: http://www.celticawen.frih.net/test/menu.html

I love this menubar and would really like to be able to use it. I know I said I had changed my mind about having a 3 level one, but I've decided I would like that option.

Azmo - I know you put up the code for a three level menu, but I didn't like the way the 3rd level dropped down.[/quote]
woundedhealer
I'm finally close to finishing my menubar. I've lost count of how many weeks I've been working on it. Smile As I mentioned earlier, I decided it would be more practical to go with a 3 level menu, even though I don't need it at the moment, there's a good chance I will in the future.

Azmo: You intruduced me to the suckerfish menubar and this is the one I've finally gone with. I tried several different styles for it, and finished up with this: http://www.celticawen.frih.net/test/testpage.php I'm hoping I can work out a way of lining up the levels better.

This one has turned out to be the one that works best in IE7, I tried to do it the same type of style as the original suckerfish, but with a menubar across the top, but I found the third or is that second? level would often disappear.

Thanks Azmo for all your patience. I got there in the end Very Happy I just have to keep my fingers crossed it works ok in different browsers.
Azmo
it will work, don't worry, and if there is any problem with it, we'll solve it. Glad it works out for you Smile
woundedhealer
Azmo wrote:
it will work, don't worry, and if there is any problem with it, we'll solve it. Glad it works out for you Smile


I've even worked out how to line up the 3rd level. My knowledge of css has grown considerably during the making of this menubar. Wink I can at long last get on with updating my website.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.