wee2john
|
Sub Menu'sI am using blew_wave on my template for my webpages. I want to know if you can create sub menus so when you hover over a navigation menu link another side menu comes up.
|
Symon
|
Re: Sub Menu's | wee2john wrote: | | I am using blew_wave on my template for my webpages. I want to know if you can create sub menus so when you hover over a navigation menu link another side menu comes up. |
go here
www.fcpremierleague.co.uk
And hoover over my nab bar is this what you mean ?
|
wee2john
|
yes that is it only on a vertical navigation menu.
|
Symon
|
| wee2john wrote: | | yes that is it only on a vertical navigation menu. |
http://www.dynamicdrive.com/
search navbar
|
wee2john
|
i followed THIS!!! guide and it worked but the sub menus aren't hidden until they are hovered over. Any help.
|
Symon
|
| wee2john wrote: | | i followed THIS!!! guide and it worked but the sub menus aren't hidden until they are hovered over. Any help. |
Please you must always leave a link to the problem, we would need to see it in action.
|
wee2john
|
here is a link to the problem:
(this is a blank page by the way)
The bit with recipes at the side. the 4 topics underneath that should appeared only whwen the mouse is hovered over it.
|
Symon
|
Then you have not set it up correctly.
Go back over the instructions.
|
Nick(NR)
|
appears fine for me in ff and ie7, the sub menu for recipes is hidden until hovered.
|
wee2john
|
it works because i changed were the coding went. Instead of putting the CSS bit into you template css you just put it onto the index of your template with the actual script beneath it. Just replace the {MYFF.NAVBARLIST} with the code. It should look like this:
| Code: | <style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: black;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background-color: yellow;
}
.suckerdiv .subfolderstyle{
background: url(media/arrow-list.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<div class="suckerdiv">
<ul id="suckertree1">
<li><a href="#">Item 1</a></li>
<li><a href="#">Item 2</a></li>
<li><a href="#">Folder 1</a>
<ul>
<li><a href="#">Sub Item 1.1</a></li>
<li><a href="#">Sub Item 1.2</a></li>
</ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Folder 2</a>
<ul>
<li><a href="#">Sub Item 2.1</a></li>
<li><a href="#">Folder 2.1</a>
<ul>
<li><a href="#">Sub Item 2.1.1</a></li>
<li><a href="#">Sub Item 2.1.2</a></li>
<li><a href="#">Sub Item 2.1.3</a></li>
<li><a href="#">Sub Item 2.1.4</a></li>
</ul>
</li>
</ul>
</li>
<li><a href="#">Item 4</a></li>
</ul>
</div>
|
In my case I took away the <div> parts so there wasn't a table around it.
So this is what my code looked like:
| Code: | <style type="text/css">
.suckerdiv ul{
margin: 0;
padding: 0;
list-style-type: none;
width: 160px; /* Width of Menu Items */
border-bottom: 1px solid #ccc;
}
.suckerdiv ul li{
position: relative;
}
/*Sub level menu items */
.suckerdiv ul li ul{
position: absolute;
width: 170px; /*sub menu width*/
top: 0;
visibility: hidden;
}
/* Sub level menu links style */
.suckerdiv ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: #0000CC;
text-decoration: none;
background: #fff;
padding: 1px 5px;
border: 1px solid #ccc;
border-bottom: 0;
}
.suckerdiv ul li a:visited{
color: black;
}
.suckerdiv ul li a:hover{
background-color: yellow;
}
.suckerdiv .subfolderstyle{
background: url(http://cooklikeapro.myfreeforum.org/templates/myff_cooklikeapro1/images/arrow-list.gif) no-repeat center right;
}
/* Holly Hack for IE \*/
* html .suckerdiv ul li { float: left; height: 1%; }
* html .suckerdiv ul li a { height: 1%; }
/* End */
</style>
<script type="text/javascript">
//SuckerTree Vertical Menu 1.1 (Nov 8th, 06)
//By Dynamic Drive: http://www.dynamicdrive.com/style/
var menuids=["suckertree1"] //Enter id(s) of SuckerTree UL menus, separated by commas
function buildsubmenus(){
for (var i=0; i<menuids.length; i++){
var ultags=document.getElementById(menuids[i]).getElementsByTagName("ul")
for (var t=0; t<ultags.length; t++){
ultags[t].parentNode.getElementsByTagName("a")[0].className="subfolderstyle"
if (ultags[t].parentNode.parentNode.id==menuids[i]) //if this is a first level submenu
ultags[t].style.left=ultags[t].parentNode.offsetWidth+"px" //dynamically position first level submenus to be width of main menu item
else //else if this is a sub level submenu (ul)
ultags[t].style.left=ultags[t-1].getElementsByTagName("a")[0].offsetWidth+"px" //position menu to the right of menu item that activated it
ultags[t].parentNode.onmouseover=function(){
this.getElementsByTagName("ul")[0].style.display="block"
}
ultags[t].parentNode.onmouseout=function(){
this.getElementsByTagName("ul")[0].style.display="none"
}
}
for (var t=ultags.length-1; t>-1; t--){ //loop through all sub menus again, and use "display:none" to hide menus (to prevent possible page scrollbars
ultags[t].style.visibility="visible"
ultags[t].style.display="none"
}
}
}
if (window.addEventListener)
window.addEventListener("load", buildsubmenus, false)
else if (window.attachEvent)
window.attachEvent("onload", buildsubmenus)
</script>
<ul id="suckertree1">
<li><a href="http://cooklikeapro.myfreeforum.org/home.html">Homepage</a></li>
<li><a href="http://cooklikeapro.myfreeforum.org">Forum</a></li>
<li><a href="http://cooklikeapro.myfreeforum.org/recipes.html">Recipes</a>
<ul>
<li><a href="http://cooklikeapro.myfreeforum.org/starters.html">Starters</a></li>
<li><a href="http://cooklikeapro.myfreeforum.org/mains.html">Mains</a></li>
<li><a href="http://cooklikeapro.myfreeforum.org/desserts.html">Desserts</a></li>
<li><a href="http://cooklikeapro.myfreeforum.org/other.html">Other</a></li>
</ul>
</li>
<li><a href="http://cooklikeapro.myfreeforum.org/contactus.html">Contact Us!!</a></li></li>
</ul>
|
|
Nick(NR)
|
my bad, should've spotted it earlier, div placed inside table cells is bad practice and forces things to show incorrectly, as div blocks are placed via css positioning i.e. top:10px; left: 15px; would move it down by 10 and away fro the left edge by 15.
sorry bout not spotting that, must have gone blind 
|
|
|
