Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 6516
  • Last Modified:

floating menu using CSS

any one know how to create a floating menu using CSS . I want to replace a table header with a CSS style floating menu. here is my table header...
<TABLE id="Table" cellSpacing="0" cellPadding="1" border="0">
                  <thead>
                        <TR>
                              <th align="center" width="70" bgColor="#c0c0c0" colSpan="1" >
                                    <FONT size="1"><small>Account #</small> </FONT>
                              </th>
                              <th align="center" width="157" bgColor="#c0c0c0" colSpan="1" >
                                    <small><FONT size="1">Cust name </FONT></small>
                              </th>
                              <th align="center" width="75" bgColor="#c0c0c0" colSpan="1" >
                                    <small><FONT size="1">BTN</FONT> </small>
                              </th>
                              <th align="center" width="45" bgColor="#c0c0c0" colSpan="1" >
                                    <small><FONT size="1">Loc #</FONT> </small>
                              </th>
                              <th align="center" width="30" bgColor="#c0c0c0" colSpan="1" >
                                    <small><FONT size="1">Plan</FONT></small><FONT size="1"> </FONT>
                              </th>
                              <th align="center" width="135" bgColor="#c0c0c0" colSpan="1" >
                                    <FONT size="1"><small>Plan name</small> </FONT>
                              </th>
                              <th align="center" width="100" bgColor="#c0c0c0" colSpan="1" >
                                    <FONT size="1"><small>Total Amount</small> </FONT>
                              </th>
                              <th align="center" width="100" bgColor="#c0c0c0" colSpan="1" >
                                    <FONT size="1"><small>Net Comm</small></FONT><FONT size="2"> </FONT>
                              </th>
                              <th align="center" width="75" bgColor="#c0c0c0" colSpan="1" >
                                    <FONT size="1"><small>Net Pct</small></FONT><FONT size="2"> </FONT>
                              </th>
                        </TR>
                  </thead>
0
ajaypappan
Asked:
ajaypappan
  • 6
  • 6
  • 2
  • +1
2 Solutions
 
BatalfCommented:
This is one example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Media test</title>
<style type="text/css">
body,html{
    width:100%;
    height:100%;
    padding:0px;
    margin:0px;
}
#myMenu{    /* Applies to <div id="myMenu"> */
    font-size: 0.7em;
    background-color: #C0C0C0;
}
#myMenu a{  /* Applies to all <a> tags that are children of <div id="myMenu"> */
    color:#000000;
    font-weight:bold;
    text-decoration:none;
    padding-left:20px;  /* Left spacer for the links */
    padding-right:20px; /* Right spacer for the links */
    line-height:150%;
}
#myMenu a:hover{    /* Mouse over effect for the menu items */
    color:#FF0000;
   
}
</style>
</head>
<body>
<div id="myMenu">
    <a href="account.html">Account #</a>
    <a href="custom.html">Cust name</a>
    <a href="custom.html">BTN</a>
    <a href="custom.html">Loc #</a>
    <a href="custom.html">Plan</a>
    <a href="custom.html">Plan name</a>
    <a href="custom.html">Total Amount</a>
    <a href="custom.html">Net Comm</a>
    <a href="custom.html">Net Pct</a>
</div>
</body>
</html>
0
 
ajaypappanAuthor Commented:
it doesn't floats.. as i scroll my page it  goes away with the page
0
 
GrandSchtroumpfCommented:
> I want to replace a table header with a CSS style floating menu.
Table headers and menus are completely different things.
I suppose what you want is a table header that remains on top of the table when you scroll.
0
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 
ajaypappanAuthor Commented:
yes!!
0
 
BatalfCommented:
Ok - Is that what you meant by floating!? :-)

In Firefox, you can use position:fixed. In Ie, you have to move the layer with Javascript when someone scrolls the page.

example:


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Media test</title>
<style type="text/css">
body{
      height:100%;
      padding:0px;
      margin:0px;
}
#myMenu{
      font-size: 0.7em;
      background-color: #C0C0C0;
      position:fixed;
      top:0px;
      left:0px;
}
#myMenu a{
      color:#000000;
      font-weight:bold;
      text-decoration:none;
      padding-left:20px;
      padding-right:20px;
      line-height:150%;
}
#myMenu a:hover{
      color:#FF0000;
      
}
</style>
<script type="text/javascript">
function setEvents(){
      if(document.all){
            document.getElementById('myMenu').style.position='absolute';
            document.documentElement.onscroll=moveLayer;      
            document.getElementById('myMenu').style.top = document.documentElement.scrollTop + 'px';      
      }
}
function moveLayer(){
      document.getElementById('myMenu').style.top = document.documentElement.scrollTop + 'px';
}
window.onload=setEvents;
</script>
</head>
<body>
<div id="myMenu">
      <a href="account.html">Account #</a>
      <a href="custom.html">Cust name</a>
      <a href="custom.html">BTN</a>
      <a href="custom.html">Loc #</a>
      <a href="custom.html">Plan</a>
      <a href="custom.html">Plan name</a>
      <a href="custom.html">Total Amount</a>
      <a href="custom.html">Net Comm</a>
      <a href="custom.html">Net Pct</a>
</div>
<div>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
Content of this page<br>
</div>
</body>
</html>
0
 
GrandSchtroumpfCommented:
Here is a nice solution from Sean:  http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21408880.html
But it only works in IE.
0
 
GrandSchtroumpfCommented:
> Here is a nice solution from Sean
Well... should have said here WAS... Now it's a nice Error 404.
0
 
seanpowellCommented:
Still is - been busy moving my server today. Back online now.
0
 
seanpowellCommented:
Just FYI - this allows you to have a fixed position div without any javascript:

http://www.pdgmedia.com/ee/fixed.html

Thanks,
Sean
0
 
ajaypappanAuthor Commented:
Batalf ,
I am using a frame window and this page opens up in one frame .. still not working
any other idea...
0
 
GrandSchtroumpfCommented:
If you are already using frames, you can put the header in a frame and content in another frame.
If you do that, make sure you use "table-style:fixed" and you specify the width of ALL the columns, otherwise your header won't be aligned.
Then you'll need some javascript to synch the scrolling of the header with the scrolling of the table...
0
 
ajaypappanAuthor Commented:
since i am using 4 different reports on the same frame I can't fixed it. What i want is with each page i should get a floating  table header..
0
 
ajaypappanAuthor Commented:
any one else can help me out...?
0
 
GrandSchtroumpfCommented:
Sorry if we cannot help you more than that.
What you are asking for is not a standard behaviour...

How about these:
http://www.imaputz.com/cssStuff/bigFourVersion.html
http://www.whirlywiryweb.com/q%2Fdhtmlgems.asp
http://www.quirksmode.org/js/fixedhead.html
http://www.activewidgets.com/grid/
0
 
ajaypappanAuthor Commented:
0
 
GrandSchtroumpfCommented:
<:°)
0

Featured Post

Free Tool: Path Explorer

An intuitive utility to help find the CSS path to UI elements on a webpage. These paths are used frequently in a variety of front-end development and QA automation tasks.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

  • 6
  • 6
  • 2
  • +1
Tackle projects and never again get stuck behind a technical roadblock.
Join Now