Member Avatar for Mike_H

I am in the process of making an existing website designed in 2005 to be able to work well with wide-screen monitors, tablets and phones.

On the existing site, http://pettitslawnscapes.com/html/design___build.html, the menu selection Design & Build has six submenus that drop down when your mouse hovers over it. I need to do the same in the new site, http://pettitslawnscapes.com/pettitsnew/design.htm. Any ideas as to how to easily make this happen or a good website that can help me? I will be using the existing graphics for the drop-down menu.

Also notice that each menu item changes from normal to bold when your mouse hovers over them. This is done by swapping out a bold graphic for the normal one.

Thanks in advanced.

  • 2 Contributors
  • 3 Replies
  • 286 Views
  • 3 Hours Discussion Span
  • Latest Post Latest Post by zelrick
Member Avatar for zelrick

I am interested to this topic so gonna up this one.

I am using simple javascript in my web, I hope someone will do this in simple javascript too.

I'm not that good in coding I hope it would be understandable.

Just a share to the simple dropdown (just to have a dropdown here)

        <script type="text/javascript">
            function goToPage763(mySelect)
                {
                    PageIndex2=mySelect.selectedIndex;
                        {
                            if ( mySelect.options[PageIndex2].value != "none" )
                                {
                                //this is the key code in the JavaScript to open the new page in
                                //the iframe:-
                                    frames['iframe2'].location.href = mySelect.options[PageIndex2].value;
                                }
                        }
                }

        </script>
Member Avatar for zelrick

What is the connect of Power Bank in Drop Down List nor Web Design

Member Avatar for zelrick

Hello Mike,

Sorry I misunderstood this, I was looking for a javascript that connect with HTML.

But what you want can be done by HTML and CSS

So here is an example of what you want.

This is in your HTML:

<!-- dropdown container -->
<div class="dropdown">

    <!-- trigger button -->
    <button>Navigate</button>

    <!-- dropdown menu -->
    <ul class="dropdown-menu">
        <li><a href="#home">Home</a></li>
        <li><a href="#about">About</a></li>
        <li><a href="#contact">Contact</a></li>
    </ul>
</div>

and this in your CSS file:

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;

    /****************
     ** NEW STYLES **
     ****************/

    list-style: none; /** Remove list bullets */
    width: 100%; /** Set the width to 100% of it's parent */
    padding: 0;
}

.dropdown:hover .dropdown-menu {
    display: block;
}

/** Button Styles **/
.dropdown button {
    background: #FF6223;
    color: #FFFFFF;
    border: none;
    margin: 0;
    padding: 0.4em 0.8em;
    font-size: 1em;
}

/** List Item Styles **/
.dropdown a {
    display: block;
    padding: 0.2em 0.8em;
    text-decoration: none;
    background: #CCCCCC;
    color: #333333;
}

/** List Item Hover Styles **/
.dropdown a:hover {
    background: #BBBBBB;
}

Don't forget this code inside the <head> </head>

<link rel="stylesheet" href="MenuStyle.css">

I hope this help you, It is hover on a drop down list and show the list

If someone can do it in Javascript it will add me knowledge.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.