Solved

Customizing a spry menu bar

Posted on 2011-09-02
12
396 Views
Last Modified: 2012-05-12
I have a spry menubar at www.mauitradewinds.com/Super.  I would like to consolidate the items "Suite Brochure" and "Tradewinds Virtual Tour" as submenus of "Tradewinds Suite", and consolidate "StarWind Brochure" and "StarWind Virtual Tour" as submenus of "StarWind Cottage."  Please provide code.  Also, kindly note that the horizontal menu css and js have been renamed "indexmenu.cs" and "indexmenu.js" respectively, to distinguish them from other menus which will link to different stylesheets in the future.
0
Comment
Question by:ddantes
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 6
  • 6
12 Comments
 
LVL 17

Accepted Solution

by:
OmniUnlimited earned 500 total points
ID: 36477160
Hi ddantes,

Thanks for the new question.

Here is the HTML:
 
<ul class="MenuBarHorizontal" id="MenuBar1">
        <li>
          <div align="center"><a href="suite.shtml"target="_blank">Tradewinds Suite</a></div>
	  <ul>
              <li>
                 <div align="center"><a href="brochures/Suite-brochure.htm"target="_blank">Suite Brochure</a></div>
              </li>
             <li>
              <div align="center"><a href="Virtual Tours/Tdw/TdwVT.htm"target="_blank">Tradewinds Virtual Tour</a></div>
            </li>
           </ul>
        </li>
         <li>
           <div align="center"><a href="StarWind.shtml"target="_blank">StarWind Cottage</a></div>
           <ul>
             <li>

               <div align="center"><a href="brochures/StW-brochure.htm"target="_blank">StarWind Brochure</a></div>
             </li>
             <li>
               <div align="center"><a href="Virtual Tours/StW/StWVT.htm"target="_blank">StarWind Virtual Tour</a></div>
             </li>
           </ul>
         </li>
         <li>
           <div align="center"><a href="view.htm"target="_blank">Panoramic Views</a></div>
         </li>
         <li>
           <div align="center"><a href="hostess.htm"target="_blank">Your Hosts</a></div>

         </li>
         <li>

           <div align="center"><a href="http://www.tripadvisor.com/Hotel_Review-g60629-d1566384-Reviews-Maui_Tradewinds-Haiku_Maui_Hawaii.html"target="_blank">TripAdvisor Reviews</a></div>
         </li>
         <li>
           <div align="center"><a href="http://www.mauitradewinds.com/cgi-bin/rsv50load.pl?0001/av0001.html"
          target="_blank">Check Availability</a></div>
         </li>
         <li>
           <div align="center"><a href="location.htm"target="_blank">Location</a></div>

         </li>   
         <li>
           <div align="center"><a href="contact.htm"target="_blank">Contact</a></div>
         </li>     
         </ul>

Open in new window


I think you already have CSS set up for this.  If the appearance is not what you want, we can work on that.
0
 

Author Comment

by:ddantes
ID: 36477187
That was quick, and it works great.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36477201
HA! Wow, thanks for the points!  Are you sure you didn't need help with the CSS?
0
Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

 

Author Comment

by:ddantes
ID: 36477227
Thank you for inquiring.  I am having some difficulty there.  If I made the font large enough to be readable at high resollution,  the drop-down menus overlap with the first paragraph of text, which is confusing.  If I create enough vertical space to accommodate the drop down menu, the empty space is hard to justify
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36477305
You don't want the text of the submenu items stacked like that do you?  I noticed you changed the CSS file.  What you will need to do is add some new styles to that file, and then we can play with the adjustments.

Add the following to your indexmenubar.css file:
 
ul.MenuBarHorizontal li ul {
}

ul.MenuBarHorizontal li ul li {
    width: 150px;
}

Open in new window


Don't worry that one of the styles is blank.  Like I said, we will have to play with it.  Once you have made these changes and uploaded them to your site so that I can see, let me know.
0
 

Author Comment

by:ddantes
ID: 36477428
Kind of you to continue after the question is closed.  The new code has been added to the css.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36477450
No problem.  I want to make sure you get your 500 points worth.

Hey, that doesn't look too bad.  You could use the new styles I introduced to further tweek the menu items (like increase the width, or the size of the font.)

What do you think?  Is it going the direction you wanted it?

What else would you like me to help you with?
0
 

Author Comment

by:ddantes
ID: 36477463
Thank you.  I can play with the fine tuning.  Before we say "good night", please have a look at what I just uploaded, and let me know what you think.
0
 

Author Comment

by:ddantes
ID: 36477484
OmniUnlimited: I need to call it a night.  I'll look for any further comments in the morning. Thanks again for your guidance.
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36477486
Wow, what a change!  Just so that you are aware that website asthetics is a very personal choice and really does not matter concerning the opinions of others because it does not matter what you do, you will always find people who like it, and people who don't.

Having said that, and knowing my opinion on how it looks does not matter, I would ask you, why grey buttons?  I mean, the site is so bright, cheery (tropical).  Grey is a dull, ugly color.  Wouldn't the site look better if the menu buttons reflected a brighter, cheerier color, like tropical blue or sun yellow (if you go to lighter colors, you will need to change the letters to darker ones).

I don't know, you might play with it and see what you think.  Also, do you like the submenus small with stacked letters like that, instead of long, one liners?

Remember, I'm just expressing personal preferences.

If there is anything else, don't hesitate to open a new question (I don't know if you noticed above the box where we type in our responses, there is a link to open a related question.  Related questions always send an email to the experts that helped on the original question notifying them that you have posted a related issue.  If you want to catch my attention, that's just one way to do it.  Another is to simply comment on this question.  I still monitor all my closed questions.)

Best of luck to you, and have a great night.
0
 

Author Comment

by:ddantes
ID: 36478323
Thank you for your feedback.  The colors and the size of submenus definitely need work.  I'm off to Canada for a week vacation, and hope to work with you later!
0
 
LVL 17

Expert Comment

by:OmniUnlimited
ID: 36479051
No problem, I'll be here.  Have a great trip!
0

Featured Post

Is Your DevOps Pipeline Leaking?

Is your CI/CD pipeline a hodge-podge of randomly connected tools? You’ve likely got a tool to fix one problem & then a different tool to fix another, resulting in a cluster of tools with overlapping functionality. Learn how to optimize your pipeline with Gartner's recommendations

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

Title # Comments Views Activity
powershell code to list items in dropdown 6 113
Logon script fails 23 70
Powershell Exchange mailboxsizes 3 58
Hta File displays dynamic File names 4 65
This article is meant to give a basic understanding of how to use R Sweave as a way to merge LaTeX and R code seamlessly into one presentable document.
In threads here at EE, each comment has a unique Identifier (ID). It is easy to get the full path for an ID via the right-click context menu. However, we often want to post a short link within a thread rather than the full link. This article shows a…
Learn how to match and substitute tagged data using PHP regular expressions. Demonstrated on Windows 7, but also applies to other operating systems. Demonstrated technique applies to PHP (all versions) and Firefox, but very similar techniques will w…
The viewer will learn how to count occurrences of each item in an array.

734 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