Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 5 of 5
  1. #1
    New Coder
    Join Date
    Feb 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    different fonts, colors in menu - is it possible?

    Hi,
    I found some very cool javascript menus for my site - with many sublevels, fully customizable and all, the problem is I need to have text with two different colors and also two different fonts. In all the menus I tried I could choose from only a certain font family, and also the text color on mouseover and on "not mouseover".

    For example, this is a very good menu - it works great and is exactly the thing I need. So can anyone please tell me what script to add so that I can have the above mentioned options - two different fonts (font families will do) and two different colors for one and the same text level.

    Here's an example to make myself more understandable:
    Open the link and see how the first button looks - it says "Home".This is how I need it to look: >> Home

    The arrows are red and are Courier, while "Home" is another font and color.

    So I wasn't able to find any menu with these kinda options.

    Please help. Thanks in advance.

    bASAEF

  • #2
    Senior Coder
    Join Date
    Jun 2002
    Location
    Wichita
    Posts
    3,880
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Look at the accessible web menu here . Since it's design is built on html you can simply have additional html code within the menu to alter the font and color for parts of the text. Don't you DARE use the <font> tag for that though .
    Check out the Forum Search. It's the short path to getting great results from this forum.

  • #3
    New Coder
    Join Date
    Feb 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Unhappy

    Thanks, but unfortunately this menu works worse than the one I have - I cannot sacrifice speed and ease of use...

  • #4
    Regular Coder
    Join Date
    Jun 2002
    Location
    Round Rock, Texas
    Posts
    443
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Cascading Style Sheets to the rescue!
    *Define two "styles" each w/ a unique name.
    *On the tag containing that text you want to effect set "class=styleOne" for example.

    "Cascading" in CSS means that styles are inhereted by "inside" tags - like <tr> tags inside of <table>. This inheritance does not over-ride any explicit stylings on these "inside" tags.

    You might want to use <span> tags around the pieces of text you want different, just so you can "hang" the class attribute on it.

    The <style> tag goes in the <head>

    Code:
    <style>
    .typeOne {
       color: green;  /* why it's not called "font-color" is beyond me */
       font-family: Garamond, sans-serif;
       /* if Garamond is not on .this computer, the default sans-serif font will be applied. */
       font-weight: bold;
       font-size: 14px;
       font-style: italic;
      
       /* a shorthad for (most of) the above: */
       font: italic  bold  14px  sans-serif;
    }
    
    .typeTwo {
       color: blue;
       font: Times  serif;
    /* if .this computer does not have Times font, the default serif font will be used */
    }
    </style>
    
    // somewhere in your HTML 
    <anyoldtag  id='file_menu'  class='typeTwo'> some text </anyoldtag>
    
    // somewhere in your javascript, to change the style.
    getElementById('file_menu').className = 'typeOne';
    // yes, it is  "className", not "class" when referencing with DOM.

  • #5
    New Coder
    Join Date
    Feb 2004
    Posts
    16
    Thanks
    0
    Thanked 0 Times in 0 Posts
    Ok - problem solved!!!
    THx X10


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •