Highlighting in element menu top

  • danbailan


    I am working on a wamp local test server fro my mobile site , so not sure I can show you this – maybe someone could tell me how if it is vital you can see this

    If i use straight top menu nav, I can highlight current using this css (with an extra css class):-

    .menu-wrapper .menu > li.kohwai.current-menu-item > a, .menu-wrapper .menu> li.kohwai.current-menu-ancestor > a, .menu-wrapper .menu > li.kohwai.current-page-ancestor > a {
    background: #209E8F; /* Old browsers */
    background: -moz-linear-gradient(top, #209E8F 0%, #03695C 100%); /* FF3.6+ */
    background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#209E8F), color-stop(100%,#03695C)); /* Chrome,Safari4+ */
    background: -webkit-linear-gradient(top, #209E8F 0%,#03695C 100%); /* Chrome10+,Safari5.1+ */
    background: -o-linear-gradient(top, #209E8F 0%,#03695C 100%); /* Opera 11.10+ */
    background: -ms-linear-gradient(top, #209E8F 0%,#03695C 100%); /* IE10+ */
    background: linear-gradient(to bottom, #209E8F 0%,#03695C 100%); /* W3C */
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#209E8F', endColorstr='#03695C',GradientType=0 ); /* IE6-9 */
    color: #eeeddc;
    text-shadow:0 -1px 0 #333;
    border-top-left-radius: 5px;
    border-top-right-radius: 5px;
    border-right:1px solid #4B3B3B;
    border-bottom:1px solid #4B3B3B;
    border-left:1px solid #4B3B3B;
    box-shadow: 0px 0px 3px #4B3B3B;

    Can i apply similar if I use the <select> element (both for the header and the footer), as I am not able to make much progress! Any ideas on the css or can you not apply css to the <select> element? I think I oweuld prefer to use this way of presenting menus on the mobile site, so am keen to know either way.

    many thanks for any help


    Syahir Hakim


    Unfortunately, <select> element can’t be easily styled. They’re meant to be functional rather than presentational. I do not think that this is necessary though. If you’re using the <select> menu, the current selected menu item will be shown while the rest are hidden.



    Thanks Syahir for the very prompt response.

    I am pleased that it is not entirely my fault I was getting nowhere fast!

    And you have actually solved the problem with the oh so obvious, of course , we know where we are in the nav as that is the only one visible – the reason to highlight therefore redundant or simply overkill .

    I think I will go with the <select> element as is.

    Thanks again.

Viewing 3 posts - 1 through 3 (of 3 total)

  • You must be logged in to reply to this topic.