SitePoint Sponsor

User Tag List

Results 1 to 7 of 7
  1. #1
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Superfish sub-menu issue

    Hello,

    I am developing a website and i was trying to set up a superfish menu.
    1. The link on my <li class="sub-menu"> does not work on the first left click of the mouse, it opens on the second click though.
    2. Links related to sub-menu items do not work at all, if I click once they do not open, if I click a second time, the link related to my <li class="sub-menu> opens.

    This is my superfish.js

    Code JavaScript:
    @import url([url]http://fonts.googleapis.com/css?family=Anton);[/url]
    nav{position:relative;margin:27px 10px 1px 10px;
    }.sf-menu ul{
    position:absolute;top:-999px;
    display:none;
    }.sf-menu ul li{
    width:100%
    }.sf-menu li{
    float: left;
    position: relative;
    font-family: 'Anton',sans-serif;
    width: 188px;
    background: #14361d;
    text-transform: uppercase;
    z-index: 1;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.4s ease;
    }.sf-menu li.sub-menu:after{
    display: block;
    position: absolute;
    content:'';
    width: 5px;
    height: 5px;
    top: 50%;
    left: 70%;
    margin-top: -1px;
    background: url(../images/i.png) 0 0 no-repeat;
    }.sf-menu li:first-child{
    width: 188px;
    }.sf-menu li:first-child>strong{display:none;
    }.sf-menu>li>a{
    display: block;
    text-align: center;
    position: relative;
    font-size: 20px;
    line-height: 1.2em;
    padding: 32px 0 32px 0;
    color: #fff;
    overflow: hidden;
    }.sf-menu li a strong{
    display: block;
    position: absolute;
    width: 100%;
    top: 0;
    left: -100%;
    right: 0;
    bottom: 0;
    z-index: -1;
    background: #206c15;
    -moz-transition: all 0.4s ease;
    -webkit-transition: all 0.4s ease;
    -o-transition: all 0.3s ease;
    }.sf-menu>li a:hover strong,.sf-menu>li.current a strong,.sf-menu>li.sfHover a strong{display:block;top:0;left:0;right:0;bottom:0;
    }.sf-menu>li:hover>strong,.sf-menu>li.current>strong,.sf-menu>li.sfHover>strong{display:none;
    }.sf-menu>li,.sf-menu>li.current,.sf-menu>li.sfHover{}.sf-menu>li>a:hover,.sf-menu>li.current>a,.sf-menu>li.sfHover>a{text-decoration:none;
    }.sf-menu>li>ul,.sf-menu>li.sfHover>ul{
    left: 20px;
    top: 87px;
    width: 126px;
    padding: 25px 0 25px 0;
    z-index: 99;
    background: #14361d;
    }.sf-menu>li>ul>li{display:block;width:100%;text-align:left;padding:4px 0 4px 27px;background:none;font-family:Arial,Helvetica,sans-serif;position:relative;}.sf-menu>li>ul>li>a{
    font-size: 10px;
    line-height: 20px;
    display: inline-block;
    color: #FFF;
    }.sf-menu li li a:hover,.sf-menu li.sfHover li.sfHover>a{
    color: #206c15;
    text-decoration: none;
    }.sf-menu li.sfHover li.sfHover:after{display:block;position:absolute;content:'';width:5px;height:9px;content:'';left:166px;top:15px;
    }@media only screen and (max-width: 995px) {.sf-menu li{
    width: 149px;
    }.sf-menu>li:first-child{
    width: 152px;
    }.sf-menu>li>a{}}@media only screen and (max-width: 767px) {nav{float:none;font:12px/15px Arial,Helvetica,sans-serif;text-transform:uppercase;color:#fff;padding:8px 3px 5px 3px;margin:13px 10px 0 10px;border-radius:4px;display:block;-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;
    }nav:before{content:'Menu:';display:none;margin-bottom:5px;
    }.sf-menu{display:none;}nav select{
    font: 12px/15px Arial,Helvetica,sans-serif;
    color: #b4bb92;
    outline: none;
    border: 2px solid #9e9e9e;
    border-radius: 3px;
    display: block!important;
    width: 100%;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    }@media only screen and (max-width: 479px) {}

    Code HTML4Strict:
    And this is the piece of HTML
     
                    <ul class="sf-menu">
                        <li class="current"><strong></strong><a href="index.html"><strong></strong>Home</a>
                        </li>
                        <li class="sub-menu"><strong></strong><a href="about.html"><strong></strong>About</a>
                            <ul>
                                <li><a href="#">history</a></li>
                                <li><a href="contacts.html">contatti</a>
                            </ul>
                        </li>
                        <li><strong></strong><a href="products.html"><strong></strong>Products</a></li>
                        <li><strong></strong><a href="index2.html"><strong></strong>Services</a></li>
                        <li><strong></strong><a href="#.html"><strong></strong>Store</a></li>
    </ul>
                            <div class="clear"></div>
                </nav>

    Can you help me fix this issue please?

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hi DenesS. Welcome to the forums.

    We can certainly help you fix this, but a live link would be much better. (Either that, or a full working example with everything on the page that we can paste into a new doc and test.)

  3. #3
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi, thank you for the reply and welcome greetings.

    Well, my website isn't hosted yet, so I can't really give a live link.
    I have uploaded 1 page of the website you can download and test, here:
    help denes plox.zip

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Hmm, thanks for those files. A tricky issue, though. It's really some kind of JS problem, because everything works fine with JS off. It might be a conflict between the various scripts on the page. Either we move this thread to the JS forum, or perhaps you could dump superfish in favor of CSS alone. Either way, it's good to make sure a site is accessible with JS off, and Superfish is meant to be an enhancement to a dropdown, while in this case, the dropdown doesn't work without JS on, so there is room for improvement anyway.

  5. #5
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think I'd like to fix it even if it is JS related.
    Off topic: Why do you think it would be better without JS? What devices can not run JS nowadays?

  6. #6
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    23,601
    Mentioned
    411 Post(s)
    Tagged
    7 Thread(s)
    Quote Originally Posted by DenesS View Post
    I think I'd like to fix it even if it is JS related.
    OK, I've moved this to the JS forum, as that aspect of it is a bit over my head.

    Why do you think it would be better without JS? What devices can not run JS nowadays?
    Most can, but not everyone has it turned on. There's a lot of debate about whether this should be catered for, but in my view, a page should only be enhanced by JS rather than dependent on it. So I always test a page with JS turned off to make sure it still works in some fashion. If your dropdown doesn't work with JS off, that's fine as long as there is some other way to access those submenu links. (That's a good idea anyway, as dropdowns kind of suck anyway, especially if you aren't using a mouse or perhaps are on a touch device.)

  7. #7
    SitePoint Member
    Join Date
    Apr 2013
    Posts
    4
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thank you lots


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
  •