• GoDaddy Community
  • Websites + Marketing | Website Builders
  • Websites + Marketing | Website Builders

    cancel
    Showing results for 
    Show  only  | Search instead for 
    Did you mean: 

    Navigation links

    I'm using an old HTML editor (if it ain't broke don't fix it) and would like to change my navigation links.  I'm currently using the below code:

    <font color="Fuchsia">Directories</font>
    <div class="sousMenu">
    <li><a href="http://nmkofc.org/2015-2016_State_Officers.pdf" target="rightside"</b>State Officers</i></a></li>
    <li><a href="http://nmkofc.org/2015-2016_State_District_Deputies.pdf" target="rightside"><B><I>District Deputies</A></li>
    <li><a href="http://nmkofc.org/2015-2016_State_Program_Directors.pdf" target="rightside"><B><I>Program Directors</A></li>
    <li><a href="http://nmkofc.org/2015-2016_Councils_JQP.pdf" target="rightside"><B><I>Councils</A></li>
    <li><a href="http://nmkofc.org/2015-2016_4th_Degree_District_Officers.pdf" target="rightside"><B><I>4th Degree District Officers</A></li>
    <li><a href="http://nmkofc.org/2015-2016_Assemblies.pdf" target="rightside"><B><I>Assemblies</A></li>
    </ul>
    </div>

     

    It looks like this ------->   untitled.JPG  What I'd really like to have is when I place the mouse over a link that new links would appear to the right of the original link then I could slide over and click on one of the associated links.  That is possible isn't it?  I have gone on line to for this and tried some of the suggested code but it wouldn't work.

     

     

    3 REPLIES 3
    Helper VI

    You mean a drop down sub menu?

    Here's a link that might help... http://cssmenumaker.com/

     

    I would write the step by step here but this site is what helped me a lot in the past.

    ~Jan Mykhail Hasselbring Web Administrator @ fullstackwebsolution.com

    Sometimes if I get stuck for a specific type of code I go and have a look at Dynamic Drive. I can generally find what I want of something close that I can tweak to do what I want it to do. 🙂

     

    http://www.dynamicdrive.com/

    Advocate V Advocate V
    Advocate V

    Here is a simple implementation.  This assumes several things:

    1. Your "old html editor" gives you a code view to access the raw HTML.  If it doesn't, it is broke.
    2. You are loading jQuery.  The alternative is madness and well beyond the scope of a simple implementation.

    In the <head> section:

    <script src="../assets/scripts/jquery-1.10.2.js"></script>
    <style>
    .sousMenu ul {
    position: relative;
    }
    .sousMenu ul li ul {
    display: none;
    position: absolute;
    left: 48px;
    padding-right: 12px;
    background-color: #DCDCDC;
    border-radius: 6px;
    z-index: 1000;
    }
    </style>
    <script>
    $(document).ready(function() {
    $('.sousMenu ul li').on('mouseenter', function() {
    $(this).find('.flyover').show('slow');
    })
    $('.sousMenu ul li').on('mouseleave', function() {
    $(this).find('.flyover').hide();
    })
    })
    </script>

    The first line loads jQuery.  You'll have to adjust it to point to where you put jQuery.

    The first style sets position for the menu.  It's necessary so that the next style works as intended.

    The second style sets the position for the flyover menu to absolute and the z-index to 1000.  This make the secondary menu 'float' over the primary menu preventing it from causing the links underneath to slide down.  It also sets some formatting for the flyover menu: left to indent the menu, padding-right for readibility, background-color to differentiate it from the primary and border-radius because I like border radius.

    The script block sets some event handlers.  When a mouse enters the area occupied by the list item, it will look for a 'child' of the list item with the class flyover.  If it finds it, it will show it.  When the mouse leaves the area, it will hide it.

    For the HTML, this is what I used...

    <font color="Fuchsia">Directories</font>
    <div class="sousMenu">
    <ul>
    <li><a href="http://nmkofc.org/2015-2016_State_Officers.pdf" target="rightside"</b>State Officers</i></a>
    	<ul class="flyover">
    		<li><a href="officer1.pdf">Officer 1</a></li>
    		<li><a href="officer2.pdf">Officer 2</a></li>
    		<li><a href="officer3.pdf">Officer 3</a></li>
    	</ul>
    </li>
    <li><a href="http://nmkofc.org/2015-2016_State_District_Deputies.pdf" target="rightside"><B><I>District Deputies</A></li>
    <li><a href="http://nmkofc.org/2015-2016_State_Program_Directors.pdf" target="rightside"><B><I>Program Directors</A></li>
    <li><a href="http://nmkofc.org/2015-2016_Councils_JQP.pdf" target="rightside"><B><I>Councils</A></li>
    <li><a href="http://nmkofc.org/2015-2016_4th_Degree_District_Officers.pdf" target="rightside"><B><I>4th Degree District Officers</A></li>
    <li><a href="http://nmkofc.org/2015-2016_Assemblies.pdf" target="rightside"><B><I>Assemblies</A></li>
    </ul>
    </div>

    Note that the sub-menu is in a UL with the class flyover and is inserted after the link and before the closing </li> tag.  That's important for the script to be able to find it and for the styling to hide it on page load.  I only added the sub-menu to the first item.  If you add sub-menus to the other items, follow those rules: after the <a> tag and before the closing </li> tag.

    You can see an implementation of the above scripting on my playground.

    Note: While the scripting is solid, I leave further styling to the serious student.

    Caveat: This script will work for a single layer of sub-menu.  Sub-sub-menus, while possible, are not handled by this simple script.

    Caveat: This script is not particularly mobile friendly but I note the rest of your site is not programmed for mobile either so I wrote it with that in mind.

    HTH.  Thanks for giving me something fun to take a break with!

    Keep on Coding!
    Mark Cicchetti - There are 10 kinds of people... those who understand binary and those who don't.