The Web Design Group

... Making the Web accessible to all.

Welcome Guest ( Log In | Register )

 
 Reply to this topicStart new topic
> menu rollover to top
marcman
post May 31 2012, 04:23 PM
Post #1





Group: Members
Posts: 2
Joined: 31-May 12
Member No.: 17,204
Hello,
I'm new here and have a question and can never find the answer.
While I do not think is difficult.
I want a website makenmet a large picture as a background screen in jquery so I have a 3 to 4 many large photos to show.
Now I want the bottom of the menu. and then a rolover menu.
example I have some links in a colored bar in the bottom width.
If you click on a link that comes up over the entire menu line a new line across the width as below.
So the reverse often drop you at the top of the website `s see.
I hope someone can help me a step forward.
Thank you very much.

Marcman rolleyes.gif

something like this:

<script type="text/javascript">
<!--
window.onload=montre;
function montre(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>

<style type="text/css">
<!--
body {
margin: 0;
padding: 0;
}
dl, dt, dd, ul, li {
margin: 0;
padding: 0;
list-style-type: none;
}
#menu {
position: absolute;
bottom: 0;
left: 0;
z-index:100;
width: 100%;
}
#menu dl {
float: left;
width: 12em;
position: relative;
margin: 0 2px;
}
#menu dt {
cursor: pointer;
text-align: center;
font-weight: bold;
background: #ccc;
border: 1px solid gray;

}
#menu dd {
background-color: #ccc;
position: absolute;
bottom:1.5em;
width:100%;
}
#menu li {
text-align: center;
}
#menu li a, #menu dt a {
color: #000;
text-decoration: none;
display: block;
height: 100%;
border: 0 none;
}
#menu li a:hover, #menu dt a:hover {
background: #eee;
}

a {text-decoration: none;
color: black;
color: #222;
}
-->
</style>
</head>

<body>

<div id="menu">
<dl>
<dt onMouseOver="java script:montre('smenu1');">Menu 1</dt>
<dd id="smenu1">
<ul>
<li><a href="#">menu 1.1</a></li>
<li><a href="#">menu 1.2</a></li>
<li><a href="#">menu 1.3</a></li>
<li><a href="#">menu 1.4</a></li>
<li><a href="#">menu 1.5</a></li>
<li><a href="#">menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="java script:montre('smenu2');">Menu 2</dt>
<dd id="smenu2">
<ul>
<li><a href="#">menu 1.1</a></li>
<li><a href="#">menu 1.2</a></li>
<li><a href="#">menu 1.3</a></li>
<li><a href="#">menu 1.4</a></li>
<li><a href="#">menu 1.5</a></li>
<li><a href="#">menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="java script:montre('smenu3');">Menu 3</dt>
<dd id="smenu3">
<ul>
<li><a href="#">menu 1.1</a></li>
<li><a href="#">menu 1.2</a></li>
<li><a href="#">menu 1.3</a></li>
<li><a href="#">menu 1.4</a></li>
<li><a href="#">menu 1.5</a></li>
<li><a href="#">menu 1.6</a></li>
</ul>
</dd>
</dl>
<dl>
<dt onMouseOver="java script:montre('smenu4');">Menu 4</dt>
<dd id="smenu4">
<ul>
<li><a href="#">menu 1.1</a></li>
<li><a href="#">menu 1.2</a></li>
<li><a href="#">menu 1.3</a></li>
<li><a href="#">menu 1.4</a></li>
<li><a href="#">menu 1.5</a></li>
<li><a href="#">menu 1.6</a></li>
</ul>
</dd>
</dl>
</div>


This post has been edited by marcman: May 31 2012, 05:18 PM
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
Darin McGrew
post Jun 1 2012, 10:00 AM
Post #2


WDG Member
********

Group: Root Admin
Posts: 7,851
Joined: 4-August 06
From: Mountain View, CA
Member No.: 3
Can you explain in more detail what you expect to happen, and what you're seeing instead? Also, the URL (address) of a document that demonstrates the problem would be very helpful.


--------------------
Darin McGrew
WDG Member since 1998
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
marcman
post Jun 1 2012, 05:42 PM
Post #3





Group: Members
Posts: 2
Joined: 31-May 12
Member No.: 17,204
QUOTE(Darin McGrew @ Jun 1 2012, 05:00 PM) *

Can you explain in more detail what you expect to happen, and what you're seeing instead? Also, the URL (address) of a document that demonstrates the problem would be very helpful.


Hi Darin, I do not have url to show. because I still fail to make this, I can not begin.
I will post a few pictures of what I want to make.
the photo on the back that shifts in jquery. and below the menu. photo1 start and when you mouse over the first button is that a rule comes up menu containing `s etc etc. I hope you can help me with a little push I do not get out. Thank you. Marc ....


Attached thumbnail(s)
Attached Image Attached Image Attached Image
User is offlinePM
Go to the top of the page
Toggle Multi-post QuotingQuote Post
« Next Oldest · Markup (HTML, XHTML, XML) · Next Newest »
 

Reply to this topicStart new topic
2 User(s) are reading this topic (2 Guests and 0 Anonymous Users)
0 Members:

 

Display Mode: Standard · Switch to: Linear+ · Switch to: Outline

Track this topic · Email this topic · Print this topic · Subscribe to this forum

- Lo-Fi Version Time is now: 19th May 2013 - 03:14 PM
Invision Power Board © 2013  IPS, Inc.
Licensed to: HTMLHelp.com, LLC