带焦点的菜单添加文本

Question

我想把菜单做得很小，所以我有每个名字的首字母，我添加 "focus" 但我希望它显示完整的单词。例如：

    css:

    .menu:focus {

     }

    php:

    <nav>
    <li class="menu"><a href="home.php>h</a></li><br>
    <li class="menu"><a href="galery.php>g</a></li>
    </nav>

and so you simply see the menu like:

h

g

如果你点击 h for ex。你会看到：

home

g

我该怎么做？

然后如果再次单击则转到 link 页面。

可能吗？

编辑

    php:

    <nav>
    <li>
        <span class="m">
            H
        </span>
        <span class="f">
            <a class="menu" href="home.php">
            Home
            </a>
        </span>
    </li>
    </span>

    css:

    nav li .f {
        display: none;
    }

    nav li:hover .f {
        display: inline;
        background-color: #202020;
    }

直到这里好吧，你路过它显示带有 link 的完整单词，但是 objective 它不只是路过，它点击它我只是将悬停更改为焦点它停止工作。

悬停“.m”也显示 none 它不起作用。它应该切换是不是可能？

    css:

    nav li:focus .f {
        display: inline;
        background-color: #202020;
    }

    nav li: hover .m {
        display: none;
    }

谢谢

Answer 1

我已经为你创建了 fiddle 你想要这样的东西吗？

<nav>
<li class="menu">
    <a href="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="home.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

nav li a .test2{display:none} 
nav li a:focus .test2, nav li a:hover .test2{display:inline}

或者如果你想要 javascript 这里的解决方案是 u

的代码

html

<nav class="nav">
<li class="menu">
    <a href="javascript:;" data-url="home.php">
        <span class="test">h</span><span class="test2">ome</span>
    </a>
</li>
<li class="menu">
    <a href="javascript:;" data-url="gallary.php">
        <span class="test">g</span><span class="test2">alery</span>
    </a>
</li>

CSS

nav li.menu a .test2{display:none;}
nav li.menu a .test2.open{display:inline;}

Jquery

$(".nav>li>a").click(function(e) {
    var trig = false;
    var links = $(this).data("url");
    $(this).children(".test2").addClass("open");
    if(trig == false){
        $(this).click(function(e) {
            window.location.href = links;
        });

    }

});

http://jsfiddle.net/ismailfarooq/p667L2y0/

带焦点的菜单添加文本

menu with Focus add text

css

focus

responsive-design

编辑