dcsimg
www.webdeveloper.com
Results 1 to 2 of 2

Thread: Creating Menu Indicators

  1. #1
    Join Date
    May 2012
    Posts
    4

    Creating Menu Indicators

    I want to add indicator icons to my menu when a user has new messages etc... what is the best technique to do this in CSS insofar as positioning is concerned? What's the markup look like in HTML/CSS?

    Right now it is a simple inline ul > li menu

    Here's a screenshot of what I want to create, I did this in PhotoShop, the blue bubble icons with a number in it, which is dynamic of course:

    http://i.imgur.com/bofyD.jpg

  2. #2
    Join Date
    Nov 2006
    Location
    Oakland
    Posts
    500
    <li><a href="...">Messages</a><span id="nbmsges">15"</span></li>

    #nbmsges{
    /* width and height will be the same as background image */
    display:block;
    width:30px;
    height:30px;
    background:url(images/speechicon.png) no-repeat 0 0;
    padding:2px 0 0 5px; /* set to position number */
    position:absolute;
    top:0;
    right:0;
    }

    Make sure the top level ul > li items have enough height and width to accommodate both the hyperlink <a ..>...</a> and the <span ...>..</span> elements.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Posting Permissions

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



Recent Articles