Solved

CSS navigation in Dreamweaver MX

Posted on 2003-12-05
5
248 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
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

Enroll in May's Course of the Month

May’s Course of the Month is now available! Experts Exchange’s Premium Members and Team Accounts have access to a complimentary course each month as part of their membership—an extra way to increase training and boost professional development.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
video playback resume on webpages 2 87
Advice on what platform to use for a web app for AWS 3 119
Specific format 21 236
React or Angular? 6 93
Preface In the first article: A Better Website Login System (http://www.experts-exchange.com/A_2902.html) I introduced the EE Collaborative Login System and its intended purpose. In this article I will discuss some of the design consideratio…
Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
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…
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

738 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