Solved

Need to change look of drop down buttons

Posted on 2011-03-05
12
353 Views
Last Modified: 2012-06-27
Hii!
We need to change the look of the drop down buttons on our top navigation bar to look something like this website's drop down menu. http://www.ringcentral.com/
Here is an example of our current top navigation bar and drop down menus.
http://www.topsecurityinc.com/testpage11.html
Here is the CSS that controls it.
ul.dropdown{position:relative;}
ul.dropdown li{width:159px;height:42px;text-align:center;font-weight:700;float:left;background:url(../web/images/global_bar_bk_r1_c2.gif) repeat-x 50% top;}
ul.dropdown a:active{color:orange;}
ul.dropdown li a{padding-top:12px;height:30px;text-align:center;display:block;border-right:1px solid #333;font:bold 14px verdana, sans-serif;color:#FFF;}
ul.dropdown li:last-child a{border-right:none;}
ul.dropdown li.hover,ul.dropdown li:hover{color:#000;position:relative;}
ul.dropdown ul{z-index:600;visibility:hidden;position:absolute;top:100%;left:0;}
ul.dropdown ul li{width:159px;font-weight:400;background:url(../web/images/global_bar_bk_r1_c2.gif) repeat-x 50% top;color:#000;border-right:1px solid #333;float:none;}
ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;}
ul.dropdown ul ul{left:100%;top:0;}
ul.dropdown li:hover > ul{visibility:visible;}

Would also appreciate any help on adding the down arrows on the top buttons with drop down items.
Any specific code modifications would be greatly appreciated.
0
Comment
Question by:TrueBlue
  • 7
  • 5
12 Comments
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
What do you want exactly to implement?

Have a look at this: sample
0
 

Author Comment

by:TrueBlue
Comment Utility
SSupreme,

I like the top blue navigation bar, but I think it would look better if the drop down buttons were in a white box with rounded corners like this attached image. sample drop down menu
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
ul.dropdown ul li{width:159px;font-weight:400;background:white;color:#000;border-right:1px solid #333;float:none;)
ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:#000;}

it makes subnav white with black font colour. If you want make "rounded" corners you have to add images at the and of second <ul>. They did it using this image http://www.ringcentral.com/images/hp/navigation/small/office.png .
Also you have to clean up your CSS file from unused rules, there are about 40% of them.
0
 

Author Comment

by:TrueBlue
Comment Utility
SSupreme,
I added this to my test page, but it did not seem to have changed the look of the drop downs.
    <script language="css" type="text/css">
    ul.dropdown ul li{width:159px;font-weight:400;background:white;color:#000;border-right:1px solid #333;float:none;)
    ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:#000;}
    </script>
Any ideas?
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
try this instead:
<style type="text/css">
    ul.dropdown ul li{width:159px;font-weight:400;background:white;color:#000;border-right:1px solid #333;float:none;)
    ul.dropdown ul li a{border-right:none;width:100%;display:inline-block;padding-top:4px;color:#000;}
    </style>
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
Don't add! Replace already existed ones.
0
Better Security Awareness With Threat Intelligence

See how one of the leading financial services organizations uses Recorded Future as part of a holistic threat intelligence program to promote security awareness and proactively and efficiently identify threats.

 

Author Comment

by:TrueBlue
Comment Utility
SSupreme,

So I created another stylesheet name style1.css and updated the text page to use it.
The second line of recommended code is highlighted by my designer and says marked invalid due to not supported by current scheme. As you can see these two lines of code make the drop down menus inoperative.
Any ideas?
TIA
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
Well, changing colour doesn't make menu inoperative.
Before I posted those line I tested them and they worked.
 sampleTry again beginning from style.css
0
 

Author Comment

by:TrueBlue
Comment Utility
SSupreme,

Ok. I got it now. :)
I changed the buttons to blue just flat and updated the test page.
But the horitizontal lines between the drop down buttons has seemed to disappear.
Any idea where that is controlled?
TIA
0
 
LVL 16

Expert Comment

by:SSupreme
Comment Utility
here  at ul.dropdown ul li
add border-bottom:1px solid; and remove border-right:~~;
0
 
LVL 16

Accepted Solution

by:
SSupreme earned 500 total points
Comment Utility
also if you would like to remove little space here:
 space
find: .topnav-wrap {
    height: 42px;
    margin-left: 9px;
    padding-left: 5px;
    width: 828px; <--adjust value to 828px
}
0
 

Author Comment

by:TrueBlue
Comment Utility
SSupreme,

That looks great :)
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Suggested Solutions

Title # Comments Views Activity
Jump links not quite lining up 18 49
HTML Lists 3 29
CSS Columns on Slider Mobile 4 21
Fixing my modal from bootstrap 17 6
Use these top 10 tips to master the art of email signature design. Create an email signature design that will easily wow recipients, promote your brand and highlight your professionalism.
Not sure what the best email signature size is? Are you worried about email signature image size? Follow this best practice guide.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now