Question

我有一个滑动菜单应该隐藏在我的主页后面，事实是，我不能给主页绝对位置，因为它破坏了文档流程和文章的长度是相对的。另一方面，我不能给菜单一个负面的索引，因为它几乎可以在任何东西后面，因此它不会滑动。这些是我尝试过的事情。我也尝试在两者中使用warraping div：页面和页脚，没有用...我可以尝试做什么？菜单是纯HTML和CSS ..

我使用的WordPress主题名为NewsLayer。

这是菜单的代码。

 <div class="botoes">

    <FORM>
    <span class="spanmenu">Menu</span>
    <a href="#"  title="Voltar ao Topo" id="back-top"> <img src="/sitepds/wp-includes/images/setacima.png" class="botaovoltar"></a><br>
    <a href="#" title="Anterior"> <img src="/sitepds/wp-includes/images/setaatras.png" VALUE="Back" onClick="history.go(-1);return true;" class="botaoanterior"></a>    

    </FORM>

</div>

这是css代码

.botoes
{
    position:absolute;
    top:50%;
    left:12%;
    width:93px;
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#dddddd', endColorstr='#eeeeee'); /* for IE 9 or older */
    background: -webkit-gradient(linear, left top, left bottom, from(#dddddd), to(#eeeeee)); /* for WebKit */
    background: -webkit-linear-gradient(top, #dddddd, #eeeeee); /* for newer versions of WebKit */
    background:    -moz-linear-gradient(top, #dddddd, #eeeeee); /* for Firefox 3.6+ */
    background:      -o-linear-gradient(top, #dddddd, #eeeeee); /* for Opera 11.1+ */
    background:     -ms-linear-gradient(top, #dddddd, #eeeeee); /* for IE 10+ */
    -webkit-border-radius: 10px 0px 0px 10px;
    -o-border-radius: 10px 0px 0px 10px;
    -moz-border-radius: 10px 0px 0px 10px;
    border-radius: 10px 0px 0px 10px;
    border-width:2px;
    border-color:#999999;
    border-style:solid;
    position:fixed;
    filter:alpha(opacity=70);
    opacity:0.7;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
    text-align:left;
    -o-box-shadow:-2px 5px 10px #bbbbbb;
    -moz-box-shadow:-2px 5px 10px #bbbbbb;
    -webkit-box-shadow:-2px 5px 10px #bbbbbb;
    box-shadow:-2px 5px 10px #bbbbbb;
    z-index:1;
    vertical-align:middle;
    height:100px;
}

.botoes:hover
{
    left:8%;
    filter:alpha(opacity=100);
    opacity:1.0;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.botoes .botaovoltar, .botaoanterior
{
    text-align:center;
}

.botaovoltar
{
    position:absolute;
    top:0px;
    left:30px;
    width:40px;
    filter:alpha(opacity=50);
    opacity:0.5;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.botaoanterior
{   
    position:absolute;
    top:50px;
    left:30px;
    width:40px;
    filter:alpha(opacity=50);
    opacity:0.5;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}

.botaovoltar:hover
{
    width:40px;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}
.botaoanterior:hover
{
    width:40px;
    filter:alpha(opacity=100);
    opacity:1;
    -moz-transition: all 0.8s;
    -webkit-transition: all 0.8s;
    -o-transition: all 0.8s;
    transition: all 0.8s;
}

.spanmenu
{

    position:absolute;
    top:43px;
    text-align:left;
    left:-3px;
    font-size:120%;
    color:#82b645;
    transform:rotate(-90deg);
    -ms-transform:rotate(-90deg); /* IE 9 */
    -webkit-transform:rotate(-90deg); /* Safari and Chrome */
    -moz-transform:rotate(-90deg);/*Firefox*/
}

.botoes span
{
    text-align:left;
    vertical-align:middle;
}

我只是一个网络编程和编码的菜鸟......所以，无论你能帮我什么，我们都会好的:)这是我上一期学校项目的一部分，我正在建设一个政府大楼。

这是我放置整个网站的Dropbox文件夹的链接： https://www.dropbox.com/sh/7ji6iohz101ds2w/PriNrtNc9Q

文件夹内的数据库为pds.sql.zip 请帮忙。

滑动菜单出现在主页面前

0 个答案: