Not Solved Help with Menu
#11
Not Solved
Well this is an example of the text from from header_welcomeblock_member template:

<div id="nav_outside">
<ul id="navigation-1">
   <li><a href="http://www.vampirecounts.net/portal.php" title="Home" target="_self" >Home</a>
   </li>
    <li><a href="http://www.vampirecounts.net/index.php" title="Forum" target="_self">Forum</a>
      <ul class="navigation-2">
         <li><a href="http://www.vampirecounts.net/index.php" title="Index" target="_self" >Index</a>
         </li>  
         <li><a href="http://www.vampirecounts.net/showthread.php?tid=4076" title="Carpe Noctem Staff" target="_self">Staff</a>
         </li> 
         <li><a href="http://www.vampirecounts.net/showthread.php?tid=5" title="Forum Rules" target="_self" >Rules</a>
         </li>
         <li><a href="http://www.vampirecounts.net/search.php?action=getnew" title="New Posts" target="_self" >New Posts</a>
         </li>
         <li><a href="http://www.vampirecounts.net/search.php?action=getdaily" title="Today's Posts" target="_self">Today's Posts</a>
         </li>
         <li><a href="http://www.vampirecounts.net/memberlist.php" title="Memberlist" target="_self" >Memberlist</a>
         </li>
         <li><a href="http://www.vampirecounts.net/usermap.php" title="Member's Locations" target="_self" >Member's Locations</a>
         </li>
         <li><a href="http://www.vampirecounts.net/calendar.php" title="Calendar" target="_self" >Calendar</a>
         </li>
         <li><a href="http://www.vampirecounts.net/misc.php?action=help" title="Help Topics" target="_self" >Help</a> 
        </li>
      </ul>
   </li>
   <li><a href="http://www.vampirecounts.net/usercp.php" title="User CP" target="_self">User Control Panel</a>
      <ul class="navigation-2">
         <li><a href="http://www.vampirecounts.net/usercp.php" title="User CP" target="_self">User CP</a>       
        </li>
        <li><a href="http://www.vampirecounts.net/usercp.php?action=editlists" title="Buddy List" target="_self">Buddy List</a>
        </li>
         <li><a href="http://www.vampirecounts.net/usercp.php?action=subscriptions" title="Subscribed Threads" target="_self">Subscribed Threads</a>
        </li>
         <li>{$admincplink}
         </li>
         <li>{$modcplink}
         </li>
      </ul>
   </li>
   <li><a href="http://www.vampirecounts.net/private.php?fid=1" title="Inbox" target="_self" >Inbox </a> 
      <ul class="navigation-2">
          <li>{$lang->welcome_pms_usage}
          </li> 
      </ul>
   </li>
    <li><a href="http://www.vampirecounts.net/links_fantasy.php" title="Links" target="_self" >Links</a>
      <ul class="navigation-2">
    <li><a href="http://www.vampirecounts.net/links_fantasy.php" title="Warhammer Fantasy Links" target="_self" >Warhammer Fantasy</a>
      </li>
    <li><a href="http://www.vampirecounts.net/links_40000.php" title="Warhammer 40,000 Links" target="_self" >Warhammer 40,000</a>
      </li>
    <li><a href="http://www.vampirecounts.net/links_general.php" title="General Discussion Links" target="_self" >General Discussion</a>
      </li>
      </ul>
   </li>
    <li><a href="http://www.vampirecounts.net/invocation.php" title="The Invocation" target="_self" >The Invocation</a>
      </li>
    <li><a href="http://www.vampirecounts.net/search.php" title="search" target="_self" >Search</a>
      </li>
   <li><a href="{$mybb->settings['bburl']}/member.php?action=logout&amp;logoutkey={$mybb->user['logoutkey']}">{$lang->welcome_logout}</a>
   </li>
</ul>
</div>/
Reply
#12
Not Solved
Inside each <li> that you want to have a popup text, either before of after the link code, add this
<span>Text here</span>

And obviously replace Text here with the text you want to appear.

Then in your CSS, add this.
ul#navigation-1 li, ul.navigation-2 li {
        position: relative;
}

ul#navigation-1 li span, ul.navigation-2 li span {
        position: absolute;
        top: -20px;
        left: 0;
        background: #111;
        padding: 3px;
        display: none;
}

ul#navigation-1 li:hover span, ul.navigation-2 li:hover span {
        display: block;
}

That should do it.
Reply
#13
Not Solved
Ok, I tried it but it didn't work. In the template I entered:

 <li><a href="http://www.vampirecounts.net/testsite/portal.php" target="_self" ><span>A collection of things which interest me, and might interest you</span>Home</a>

I also entered the text you gave me in the global.css under the existing data for the menu. I tried it and nothing happened? Do you need any more information?

Oh, and thank you very much for helping me by the way Smile
Reply
#14
Not Solved
Put the <span></span> text after the </a>.

Instead of
<li><a href="http://www.vampirecounts.net/testsite/portal.php" target="_self" ><span>A collection of things which interest me, and might interest you</span>Home</a>
It would be
<li><a href="http://www.vampirecounts.net/testsite/portal.php" target="_self" >Home</a><span>A collection of things which interest me, and might interest you</span>
Reply
#15
Not Solved
Hey,

Well I have amended that, and have managed to get the text to pop up, however it is in the wrong place. Basically the text pops up over the button as per this screenshot:

   

How do I put this above the navigation bar in the centre, and on one line?

Cheers
Reply
#16
Not Solved
Try adding this to the ul#navigation-1 li span, ul.navigation-2 li span in the CSS
min-width: 300px;

If it still does that you can try adding more px.
Reply
#17
Not Solved
Hi again!

I have been playing around with this but still having problems.

Basically the text is popping up in regards to the location of the hovered over button. This means that if I hover over something halfway down one of the lists, the text cuts into the list.

Also it doesn't centre , but positions left but left of the list again which means when you hover over things towards the right it goes off the page.

Basically I want to be able to position the popup text by the box that encompasses the navigation bar, namely this:

}

#navigation-1 {
background:url(images/Seperator.gif) top left repeat-x;
padding:1px 0;
margin:0px;
list-style:none;
width:100%;
height:21px;
border-top:1px solid #525252;
border-left:1px solid #525252;
border-right:1px solid #525252;
border-bottom:1px solid #525252;
font:normal 8pt verdana, arial, helvetica;

Any ideas how to do that?

Cheers
Reply
#18
Not Solved
Hi,

No help with this? Sad

I would really appreciate if someone could help me with this last little bit........
Reply
#19
Not Solved
Anyone - I would be prepared to use javascript if needs be?
Reply


Forum Jump:


Users browsing this thread: 1 Guest(s)