Solved

CSS navigation in Dreamweaver MX

Posted on 2003-12-05
5
240 Views
Last Modified: 2013-11-19
Hi-
  I need to make some horizontal navigation links on a Website, and I've heard it can be done using cascading style sheets.  What I'm after is this:  I've got four horizontal links, arranged in a table.  Is there a way that when I rollover one link, four sub-page links appear underneath it, also horizontally?  For example:

(Main Links)        Images        Clients         Portfolio        Contact        

(Subpage Links)                                      Address   Phone Number   Email   Map  

So here, if I rollover Contact, I want the new links underneath to show up, and only when I rollover Contact, and do that for each main link.  Is there a way to do this using CSS?  Thanks.

-Greg
0
Comment
Question by:gregfl2001
5 Comments
 
LVL 23

Accepted Solution

by:
Zeffer earned 25 total points
ID: 9887683
No. CSS is for controlling the 'look'  of page elements
you would need to use dhtml/javascript for functionality such as you describe.
there's one here in that horizontal form..
http://www.milonic.com/menusample.php?sampleid=25
Z
0
 
LVL 16

Assisted Solution

by:jaysolomon
jaysolomon earned 25 total points
ID: 9897869
what about this

<html>

      <head>
            <meta http-equiv="content-type" content="text/html;charset=iso-8859-1">
            <title>DHTML for the WWW | Creating Drop-down Menus</title>
<script type="text/javascript">
<!--
var isDHTML = 0;
var isID = 0;
var isAll = 0;
var isLayers = 0;
      if (document.getElementById) {
            isID = 1; isDHTML = 1;
      }
      else {
            if (document.all) {
                  isAll = 1; isDHTML = 1;
            }
            else {
                  browserVersion = parseInt(navigator.appVersion);
                  if ((navigator.appName.indexOf('Netscape') != -1) && (browserVersion == 4)) {
                        isLayers = 1; isDHTML = 1;
                  }
            }
      }
function findDOM(objectID,withStyle) {
      if (withStyle == 1) {
            if (isID) {
                  return document.getElementById(objectID).style ;
            }
            else {
                  if (isAll) {
                        return document.all[objectID].style;
                  }
                  else {
                        if (isLayers) {
                              return document.layers[objectID];
                        }
                  }
            }
      }
      else {
            if (isID) {
                  return document.getElementById(objectID);
            }
            else {
                  if (isAll) {
                        return document.all[objectID];
                  }
                  else {
                        if (isLayers) {
                              return document.layers[objectID];
                        }
                  }
            }
      }
}
var menuTop = 45;
var menuLeft = 400;
var domSMenu = null;
var oldDomSMenu = null;
var t = 0;
var lDelay = 3;
var lCount = 0;
var pause = 250;

function popMenu(menuNum){
      if (isDHTML) {
///// Sets the previous menu's visibility to hidden
            t = 2;
            if (oldDomSMenu) {
                  oldDomSMenu.visibility = 'hidden';
                  oldDomSMenu.zIndex = '0';
                  t = 2;
                  lCount = 0;
            }

///// Defines the DOMs      of the menu objects
            var idMenu = 'menuHead';
            var domMenu = findDOM(idMenu,0);

            var idMenuOpt = 'menuHead' + menuNum;
            var domMenuOpt = findDOM(idMenuOpt,0);            

            var idSMenu = 'menu' + menuNum;
            var domSMenu = findDOM(idSMenu,1);
///// Defines the positions of the sub-menus
      if (isID || isAll) {       
            var menuLeft = (domMenu.offsetLeft) + (domMenuOpt.offsetLeft) + 5;
            var menuTop = (domMenu.offsetTop) + (domMenu.offsetHeight) + 5;
      }
      if (isLayers) {
            var menuLeft = document.layers[idMenu].layers[idMenuOpt].pageX - 5;
            var menuTop = domMenu.pageY + domMenu.clip.height - 5;
      }
///// Positions and shows the menu
      if (oldDomSMenu != domSMenu) {      
            domSMenu.left = menuLeft;
            domSMenu.top = menuTop;
            domSMenu.visibility = 'visible';
            domSMenu.zIndex = '100';
            oldDomSMenu = domSMenu;
      }
///// Resets oldDom if it is the same as the current DOM
      else {
            oldDomSMenu = null;
            }
      }
      else {
            return null;
      }
}

function delayHide() {
///// Checks to see if there is a menu showing and whether
///// the global variable 't' has been set to 0
    if ((oldDomSMenu) && (t == 0)) {
///// Hides the old menu, resets menu conditions,
///// and stops the function running
        oldDomSMenu.visibility = 'hidden';
        oldDomSMenu.zIndex = '0';
        oldDomSMenu = null;
        lCount = 0;
        return false;
    }

///// Interupts the function if another menu is opened
    if (t == 2) {
            lCount = 0;
            return false;
      }

///// Repeats the function adding 1 to lCount each time until
///// lCount is equal to lDelay and then sets 't' to 0 so that
///// the menu will hide when it runs again
    if (t == 1) {
        lCount = lCount + 1;
        if (lDelay <= lCount) {
                  t = 0;
            }
        if (lDelay >= lCount) {
                  setTimeout('delayHide(' + t + ')',pause);
            }
    }
}

var oWidth, oHeight;
if (document.layers) {
      oWidth = window.innerWidth; oHeight = window.innerHeight;
      window.onresize = function() {
      if (window.innerWidth != oWidth || window.innerHeight != oHeight)
            location.reload();
      }
}

// -->
</script>
<style type="text/css"><!--
body  {
      color: white;
      font-family: "Trebuchet MS", Arial, Helvetica, Geneva, sans-serif;
      background-color: #333
      }
#content {
      margin-top: 35px;
}
            
.menuStyle  {
      color: #000000;
      font-size: 12px;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      background-color: #ccc;
      padding: 5px;
      width: 100%;
      border: solid 1px #000000;
      }


#menuHead   {
      background-color: #ccc;
      position: absolute;
      z-index: 50;
      top: 0px;
      left: 0px
      }

            
#menuHead1  {
            position: relative;
             }

#menu1 {
      position: absolute;
      z-index: 100;
      visibility: hidden;
      width: 150px;
      }

#menuHead2  {
            position: relative;
             }

#menu2 {
      position: absolute;
      z-index: 100;
      visibility: hidden;
      width: 150px;
      }
      
#menuHead3  {
            position: relative;
             }

#menu3 {
      position: absolute;
      z-index: 0;
      visibility: hidden;
      width: 150px;
      }
      
      a.menulink:link {
      font-weight: bold;
      text-decoration: none
      }

a.menulink:visited {
      font-weight: bold;
      text-decoration: none
      }

a:active {
      color: #666;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      text-decoration: underline
      }

a.menulink:hover {
      color: #900;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      font-weight: bold;
      text-decoration: none;
      cursor: ne-resize;
      }


a:link {
      color: #f00;
      font-weight: bold;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
      }

a:visited {
      color: #f00;
      font-weight: normal;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif
      }

a:hover {
      text-decoration: none;
      font-family: "Trebuchet MS", Verdana, Arial, Helvetica, sans-serif;
      cursor: nw-resize;
      }
--></style>
            </head>
      <body>
      
      
      <div id="menuHead"class="menuStyle">
<b>
<a  id="menuHead1" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" onMouseOver="popMenu(1)">Menu 1</a> |
<a  id="menuHead2" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" onMouseOver="popMenu(2)">Menu 2</a> |
<a  id="menuHead3" class="menuLink" href="#" onMouseOut="t = 1; delayHide()" onMouseOver="popMenu(3)">Menu 3</a> |
</b>
</div>

<div id="menu1" class="menuStyle">
<b>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 1.1</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 1.2</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 1.3</a><br>
</b>
</div>
      
      <div id="menu2" class="menuStyle">
<b>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.1</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.2</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.3</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 2.4</a><br>
</b>
</div>

      <div id="menu3" class="menuStyle">
<b>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.1</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.2</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.3</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.4</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.5</a><br>
      <a class="menuLink" onMouseOut="t = 1; delayHide()" onMouseOver="t = 2;"  onClick="t = 0; delayHide();"  href="#">Option 3.6</a><br>
</b>
</div>
<div id="content">
      <p>Some Content Goes HERE</p>
</div>
</body>

</html>
0
 

Author Comment

by:gregfl2001
ID: 9909537
Hey guys, thanks for the help, but I got it.
0

Featured Post

Is Your Active Directory as Secure as You Think?

More than 75% of all records are compromised because of the loss or theft of a privileged credential. Experts have been exploring Active Directory infrastructure to identify key threats and establish best practices for keeping data safe. Attend this month’s webinar to learn more.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Styling your websites can become very complex. Here I'll show how SASS can help you better organize, maintain and reuse your CSS code.
SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
Viewers will learn about if statements in Java and their use The if statement: The condition required to create an if statement: Variations of if statements: An example using if statements:
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…

863 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

18 Experts available now in Live!

Get 1:1 Help Now