Results 1 to 3 of 3

Thread: CSS Spotlight Menu

  1. #1
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default CSS Spotlight Menu

    I'm trying to adapt the CSS Spotlight menu so that the spotlight is 'always on' for the link of the currently selected page. So I've amended the HTML to provide for an id selector of "current" as follows:

    HTML Code:
    <div class="spotlightmenu">
        <ul>
        <li id="current"><a href="/danband/home.html"><span>Home</span></a></li>
        <li><a href="/danband/band.html"><span>The Band</span></a></li>
        <li><a href="/danband/gigs.html"><span>Gigs</span></a></li>
        <li><a href="/danband/fans.html"><span>Fans</span></a></li>
        <li><a href="/danband/stuff.html"><span>Stuff</span></a></li>
        <li><a href="/danband/contact.html"><span>Contact</span></a></li>
        </ul>
    </div>

    And I've added this to the CSS

    Code:
    .spotlightmenu  #current { /*currently selected tab*/
        background: white; /* background color of spotlight */
        -webkit-border-radius: 50%; /* large radius to create circular borders */
        -moz-border-radius: 50%;
        border-radius: 50%;
        color: black;  /* why doesn't this work? */
    }
    Whilst the spotlight is now 'always on' for the currently selected tab, the text is dispayed white (as per the rest of the CSS table) as per the rest of the CSS, and not black as per the amended css above (i.e. it's white text under a white spotlight and therefore invisible)

    My CSS isn't exactly brilliant - any suggestions please?
    Last edited by james438; 02-18-2013 at 01:27 PM. Reason: formatted code

  2. #2
    Join Date
    Jul 2008
    Location
    Derbyshire, UK
    Posts
    1,998
    Thanks
    16
    Thanked 313 Times in 311 Posts
    Blog Entries
    12

    Default

    Without seeing the rest of the code, I'd suggest targetting the anchor text specifically - so something like ;
    Code:
    .spotlightmenu #current a { 
    color: black;
    }
    If you need more help, please provide a link to your page and to the spotlight menu demo.
    Focus on Function Web Design | Latest News RSS | Facebook | Twitter |
    Fast Edit (A flat file, PHP web page editor & CMS. Small, FREE, no database!) | Fast Edit BE (Snippet Manager) (Web content editor for multiple editable regions!) | Fast Apps |
    The only limit to creativity is imagination: JemCon.org

  3. #3
    Join Date
    Feb 2013
    Posts
    2
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    That worked perfectly Beverleyh. Many thanks!

Similar Threads

  1. css spotlight menu help
    By ianhaney in forum CSS
    Replies: 3
    Last Post: 06-18-2012, 08:39 PM
  2. css spotlight menu help
    By ianhaney in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 05-27-2012, 05:54 PM
  3. Spotlight Effect
    By Arkacaraka in forum Submit a DHTML or CSS code
    Replies: 8
    Last Post: 06-13-2011, 02:46 PM
  4. The Spotlight Effect on a Div.
    By lordjeremiahs in forum Dynamic Drive scripts help
    Replies: 10
    Last Post: 12-14-2007, 11:11 AM
  5. Spotlight Effect!
    By hayley28 in forum Dynamic Drive scripts help
    Replies: 1
    Last Post: 01-02-2006, 05:55 AM

Bookmarks

Posting Permissions

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