Simple Dropdown menu button

This is the current HTML:
<div class="search">
    <a class="yellowBtn" href="/schedule">COURSE SCHEDULE</a>
    <a class="darkBtn"   href="/receive_information">RECEIVE INFORMATION</a>
    <div id="navbar">
        <ul class="nav">
            <li id="chat"><a href="/chat" title="Chat with us">Chat with us</a></li>
            <li id="email"><a href="/contactus" title="By Email">By Email</a></li>
            <li id="sep"><hr class="hr_sep"></li>
            <li id="receive_info"><a href="/receive_information" title="Receive Information">Receive Information about this page</a></li>
        </ul>
    </div>
    <!-- ExpressionEngine search form -->
    <form method="post" action="/search">
        <div class="hiddenFields">
            <input type="hidden" name="ACT" value="4">
            <input type="hidden" name="XID" value="1235347363737637636afdebac12341241">
            <input type="hidden" name="RP" value="search/results">
            <input type="hidden" name="NRP" value="search/noresults">
            <input type="hidden" name="RES" value="">
            <input type="hidden" name="status" value="open">
            <input type="hidden" name="channel" value="">
            <input type="hidden" name="search_in" value="everywhere">
            <input type="hidden" name="where" value="all">
            <input type="hidden" name="site_id" value="1">
        </div>
        <input type="text" name="keywords" id="keywords" placeholder="Search" class="mr10" value="">
        <input type="hidden" name="orderby" value="title">
        <input type="hidden" name="sort_order" value="asc">
        <input type="submit" class="darkBtn" value="SEARCH">
    </form>
</div>

Open in new window

And CSS:
.header .search {
    text-align: right;
    padding: 5px 0 0;
    height: 25px;
    width: inherit;
    overflow: hidden;
}
.header .search form {
    display: inline;
    margin: 0;
    padding: 0;
}
.header .search input[type=text] {
    border: 1px solid #c5c0b7;
    font-size: 9px;
    line-height: 18px;
    height: 18px;
    width: 215px;
    margin: 2px 5px 0 0;
    padding-left: 5px;
    display: block;
    float: left;
    color: #999;
}
.header .search .darkBtn {
    color: #fff;
    background-color: #494949;
    padding: 0 6px;
    height: 22px;
    line-height: 14px;
    font-size: 10px;
    border: none;
    display: block;
    float: left;
    cursor: pointer;
    font-weight: 700;
    font-family: helvetica, arial, sans-serif;
    width: 105px;
    margin-top: 2px;
    margin-left: 10px;
    margin-right: 10px;
    
}
.header .search .darkBtn:hover {
    background-color: #d18716;
}
.header .search .yellowBtn {
    color: #fff;
    background-color: #d18716;
    padding: 0 6px;
    height: 22px;
    line-height: 24px;
    font-size: 10px;
    border: none;
    cursor: pointer;
    font-weight: 700;
    font-family: helvetica, arial, sans-serif;
}
.header .search .yellowBtn:hover {
    background-color: #494949;
}
.hr_sep {
    margin: 2px 0;
    border: 0;
    border-top: 1px solid #EAEAEA;
    border-bottom: 1px solid #808080;
}

Open in new window


What I'd like is to change the RECEIVE INFORMATION button to say CONTACT US and have it drop down a "menu" when clicked or hovered:

This would be the values in the menu:
<ul>
    <li id="chat"><a href="/chatlink" title="Chat with us">Chat with us</a></li>
    <li id="email"><a href="/contactus" title="By Email">By Email</a></li>
    <li id="sep"><hr class="hr_sep"></li>
    <li id="receive_info"><a href="/receive_information" title="Receive Information">Receive Information about this page</a></li>
</ul>

Open in new window


I don't want to use a full-blown "navbar" to do this.
LVL 26
Eddie ShipmanAll-around developerAsked:
Who is Participating?
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

Alexandre SimõesManager / Technology SpecialistCommented:
Hi mate,
I tried to reproduce your initial state but it looks pretty strange.
As this solution is mainly CSS, I would like to have something that resembles what you have.

Can you fix the following fiddle so that it resembles what you have?
http://jsfiddle.net/AlexCode/uxm9Lc5h/
I'll then work on top of that.
0
Julian HansenCommented:
I think easier to draw us a picture of what you want to do - your markup and styles are a plate of spaghetti and to try and work out what is required is going to be a bit of complicated task. Show us what you want to do and lets see if we can find the right markup to achieve that.

You might also want to take a look at bootstrap - specifically the button groups and drop down buttons - there might be a solution for you there.

http://getbootstrap.com/components/#btn-groups
http://getbootstrap.com/components/#btn-dropdowns
0
lenamtlCommented:
Here are some neat  Select examples: http://tympanus.net/Development/SelectInspiration/index3.html

You better use Div instead of UL/LI

<select id="receive_info" name=id="receive_info">
                <option value="">Select department</option>
                <option value="1">Sales</option>
                <option value="2">Support</option>
</select>

Open in new window

0
Ultimate Tool Kit for Technology Solution Provider

Broken down into practical pointers and step-by-step instructions, the IT Service Excellence Tool Kit delivers expert advice for technology solution providers. Get your free copy now.

Slick812Commented:
howdy EddieShipman, , I have tried to get some sort of display from the HTML and CSS that you have given, but I can not get it to show any thing in firefox that I can even start to deal with for any sort of display options to change. . . . .

the positioning  and arrangement of the buttons and FORM are not correct, even if I completely leave out the entire <ul> and <li> structure, which does not even display without the nav bar css.
0
Eddie ShipmanAll-around developerAuthor Commented:
Forgive me experts, I will build a fiddle with the structure tomorrow. I have been under the weather today and not able to work on it.
0
Eddie ShipmanAll-around developerAuthor Commented:
Actually, you can see the entire site at http://www.scic.com I want to change the RECEIVE INFORMATION button to a dropdown as shown above. BTW, this site is not my creation; I only maintain it and don't have "rights" to redo the design except where I'm mentioning.
0
Slick812Commented:
I can do a drop down from the -
    <a class="darkBtn" href="https://www.scic.com/information">RECEIVE INFORMATION</a>

But as requested, it will no longer be an <a> link, jjust a <div>, or any other element, I will use javascript to show and hide the hidden <div> that has this stucture -
<div class="dropDn">
  <a href="/chat" title="Chat with us">Chat with us</a><br />
  <a href="/contactus" title="By Email">By Email</a>
  <hr>
  <a href="/receive_information" title="Receive Information">Receive Information about this page</a>
</div>

Open in new window


But the length of the last line -
   "Receive Information about this page"
is not really matching the width over all of others, do you have any preferences on the width (relative or independent) of this drop down?

I do not really know what sort of graphical astectics (colors, font size) would be appropriate on this huby duby.
0
Slick812Commented:
I looked at the CSS for this page in -
    href="/css/c/style"
for things related to the "darkBtn" style, and it is certainly a mixed up confutation of CSS!
I decided to use the original <a> for the "darkBtn", since there is this -
   .search > a.darkBtn {

but, to get an independent dropdown, I added a container around the "darkBtn" <a> and the drop-down <div>, which changes the  
  float: left;  ordering.

<a class="yellowBtn" href="/schedule">COURSE SCHEDULE</a>
  <div class="btnDrop">
    <a class="darkBtn" style="display: inline-block; float:none; width: 102px;" href="#" onclick="$('#dropDn').toggle(220); return false;">CONTACT US</a>
    <div class="dropDn" id="dropDn">
    <a href="/chat" title="Chat with us">Chat with us</a><br />
    <a href="/contactus" title="By Email">By Email</a>
    <hr style="margin-top:1px; margin-bottom:3px; border-color: #d18716;">
    <a href="/receive_information" title="Receive Information">Receive Information<br />about this page</a>
    </div>
	</div>
	
<form method="post" action="/search">

Open in new window


CSS -
.btnDrop {
display: inline-block;
float: left;
position: relative;
}

.dropDn {
position: absolute;
top:21px;
left: 2px;
text-align: center;
width: 110px;
font-size: 11px;
font-family: helvetica, arial, sans-serif;
color: #fff;
background-color: #494949;
padding-top:3px;
/* border:1px solid #c00; */
z-index:2;
}

.dropDn a{
display: none;
margin-bottom:2px;
background-color: #d18716;
padding: 1px 2px;
}

.dropDn a:hover {
background-color: #fff;
}

Open in new window


as near as I can tell this works?
0
Eddie ShipmanAll-around developerAuthor Commented:
I finally got things working using a short and sweet script I found somewhere...
    <a id="link" class="darkBtn" href="#">CONTACT US</a>
    <div id="submenu" style="display: none;">
        <ul>
            <li><a href="#" onclick="OpenLHNChat();return false;" title="Chat with Us">Chat with us</a></li>
            <li><a href="http://www.scic.com/contactus" title="By Email">By Email</a></li>
            <li><a href="https://www.scic.com/information" title="Receive Information">Receive Information about this page</a></li>
        </ul>
    </div>

Open in new window

    $(document).ready(function() {
        $('a#link').click(function() {
            // Trigger event on click
            var submenu = $('div#submenu');
            // Store the sub menu element in the 'submenu' var
            if (submenu.is(":visible")) {
                // Is the submenu visible?
                submenu.fadeOut();
                // If so, fade it out.
            } else {
                submenu.fadeIn();
                // If not visible, fade it in.
            }
        });
        $('body').click(function() {
            if ($('div#submenu').is(":visible")) {
                // Is the submenu visible?
                submenu.fadeOut();
                // If so, fade it out.
            }
        });
    });

Open in new window

0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
Eddie ShipmanAll-around developerAuthor Commented:
Thanks for the help folks...
0
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
jQuery

From novice to tech pro — start learning today.

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.