wee2john
Apprentice
Virtual Cash: 1110
Joined: 04 Sep 2007
Posts: 148
Location: Northern Ireland
Add Karma
rated by 2 members
Add Comment
Show Comments
 |
 Posted: Wed Jun 25, 2008 7:35 pm Post subject: Sub Menu's |
 
|
|
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.
_________________
Click Here--> Cook Like a Pro in a Day!!!
Cook Like a Pro |
|
| Back to top |
|
 |
Symon
Moderator
Virtual Cash: 28730
Joined: 04 Sep 2005
Posts: 11158
Location: Hampshire,England
Add Karma
rated by 85 members
Add Comment
Show Comments
|
| Posted: Wed Jun 25, 2008 7:47 pm Post subject: 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 ?
_________________
http://www.saynoto0870.com/
http://www.myshopbag.co.uk
XXVIII/ I/ MCMLXXI |
|
| Back to top |
|
|
wee2john
Apprentice
Virtual Cash: 1110
Joined: 04 Sep 2007
Posts: 148
Location: Northern Ireland
Add Karma
rated by 2 members
Add Comment
Show Comments
|
|
| Back to top |
|
|
Symon
Moderator
Virtual Cash: 28730
Joined: 04 Sep 2005
Posts: 11158
Location: Hampshire,England
Add Karma
rated by 85 members
Add Comment
Show Comments
|
|
| Back to top |
|
|
wee2john
Apprentice
Virtual Cash: 1110
Joined: 04 Sep 2007
Posts: 148
Location: Northern Ireland
Add Karma
rated by 2 members
Add Comment
Show Comments
|
|
| Back to top |
|
|
Symon
Moderator
Virtual Cash: 28730
Joined: 04 Sep 2005
Posts: 11158
Location: Hampshire,England
Add Karma
rated by 85 members
Add Comment
Show Comments
|
| Posted: Wed Jun 25, 2008 8:37 pm Post subject: |
|
|
| 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.
_________________
http://www.saynoto0870.com/
http://www.myshopbag.co.uk
XXVIII/ I/ MCMLXXI |
|
| Back to top |
|
|
wee2john
Apprentice
Virtual Cash: 1110
Joined: 04 Sep 2007
Posts: 148
Location: Northern Ireland
Add Karma
rated by 2 members
Add Comment
Show Comments
|
| Posted: Wed Jun 25, 2008 8:40 pm Post subject: |
|
|
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.
_________________
Click Here--> Cook Like a Pro in a Day!!!
Cook Like a Pro |
|
| Back to top |
|
|
Symon
Moderator
Virtual Cash: 28730
Joined: 04 Sep 2005
Posts: 11158
Location: Hampshire,England
Add Karma
rated by 85 members
Add Comment
Show Comments
|
|
| Back to top |
|
|
Nick(NR)
Moderator
Virtual Cash: 8460
Joined: 06 May 2006
Posts: 4094
Location: Medway, Kent
Add Karma
rated by 30 members
Add Comment
Show Comments
|
| Posted: Thu Jun 26, 2008 4:45 pm Post subject: |
|
|
appears fine for me in ff and ie7, the sub menu for recipes is hidden until hovered.
_________________
CALM TIME: When calm time is called, all posters in a topic must take time out to calm down.
I'm better than Jose! |
|
| Back to top |
|
|
wee2john
Apprentice
Virtual Cash: 1110
Joined: 04 Sep 2007
Posts: 148
Location: Northern Ireland
Add Karma
rated by 2 members
Add Comment
Show Comments
|
| Posted: Sat Jun 28, 2008 10:04 am Post subject: |
|
|
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>
|
_________________
Click Here--> Cook Like a Pro in a Day!!!
Cook Like a Pro |
|
| Back to top |
|
|
Nick(NR)
Moderator
Virtual Cash: 8460
Joined: 06 May 2006
Posts: 4094
Location: Medway, Kent
Add Karma
rated by 30 members
Add Comment
Show Comments
|
| Posted: Sat Jun 28, 2008 7:52 pm Post subject: |
|
|
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 
_________________
CALM TIME: When calm time is called, all posters in a topic must take time out to calm down.
I'm better than Jose! |
|
| Back to top |
|
|
FAQ 
Search 
Memberlist 
Usergroups 
Join! (free)
Profile 
Log in to check your private messages 
Log in
