Question

我正在研究基于Html的学习笔记本。我们可以在哪里看到： -

Vegitable
Meat
Motor Vehical
Cloths

如果我将鼠标移到屏幕左侧，我需要在我的html页面（Gmail手机应用程序等功能）中添加一项功能它显示了一个菜单来选择蔬菜，汽车等。

表示像Gmail移动应用程序这样的功能，我们可以选择发送的邮件，主邮件，社交邮件和来自屏幕左侧菜单的发件箱邮件。

是否可以使用HTML？

我需要将此功能添加到我的HTML页面。请建议如何做到这一点。

代码： -

<!DOCTYPE html>
<html style="height: 100%;">

<head>
<title>My item list </title>
<style>
body, html {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
    position:relative;
}
.input {
    display: inline-block;
    padding: 0 2px;
}
.input input {
    display: block;
}
.imgtxt {
    margin: 0;
    font-family:arial;
    color:#DDDFED;
    font-size:15px;
}
#images {
    background-color: grey;
    white-space:nowrap;
}
div.scrollable {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}


div.scrollableMenu {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

div.scrollableCenter {
    margin: 0;
    padding: 0;
    overflow: auto;
    padding-left: 4px;
    padding-top: 20px;
    box-sizing:border-box;
}

#center {
    background-color:#292B3B;
    position:absolute;
    top:115px;
    left:0px;
    right:0px;
    bottom:20px;
}
#fotter {
    background-color:#CC99FF;
    text-align:center;
    position:absolute;
    left:0;
    bottom:0;
    width:100%;
}
</style>
</head>

<body >
    <div id="images" class="scrollable">
        <div class="input">
            <input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcRTBRnn9Aqx74JvKyJ7Z5ydbXXuj8cIDVuOdJZUxb02Q2LWfJGP" onclick="alert('clicked')" title="Room one" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Normal Vegitable</p>
        </div>
        <div class="input">
            <input type="image" src="http://www.boldsky.com/img/2013/03/19-greenveggies.jpg" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" />
            <p class="imgtxt">Green Vegitable</p>
        </div>
    </div>
    <div id="center" class="scrollableCenter">
        <div >
            <input type="image" src="http://t1.gstatic.com/images?q=tbn:ANd9GcTMPmp8aVaovrd3AGj1_hL_GEXX1M4DJ-TTMJ34Vr622XeY_usu" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">brinjal</p>
        <hr/>
        </div>

        <div >
            <input type="image" src="http://upload.wikimedia.org/wikipedia/commons/2/25/Cauliflower.JPG" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">cauliflower</p>
        <hr/>
        </div>

        <div >
            <input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcQJgt4i9ph9uQsS3JV940PBg-kwN1kkrKbC6FLYI6UhbxucEb91" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">tomato</p>
        <hr/>
        </div>

    <div >
            <input type="image" src="https://encrypted-tbn3.gstatic.com/images?q=tbn:ANd9GcT-mwuxaqQeHXjoZzPUoee9Rvg8Jq-eCvo8H0EgEtapjfr6U4E3" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ladyfinger</p>
        <hr/>
        </div>

    <div >
            <input type="image" src="http://t2.gstatic.com/images?q=tbn:ANd9GcQRxXUO2stKHLyET_rXpxOuLp67qc1IzlBcJGke5jYoGPeRZpnO" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">radish</p>
        <hr/>
        </div>

    <div >
            <input type="image" src="http://t3.gstatic.com/images?q=tbn:ANd9GcT2zCeG621TSX1YmcsT9DPLaQJkdVwdYk_n-eWECCa8NTtXR0LFeQ" onclick="alert('clicked')" alt="Bulb pop up" width="80" height="48" hspace="10" vspace="6"/>
            <p class="imgtxt" style="padding-top : 20px; padding-right : 100px; float:right;">ginger</p>
        <hr/>
        </div>
    </div>
    <div id="fotter">List of Items</div>
</body>
</html>

enter image description here

Gmail应用： - enter image description here

Answer 1

您需要的功能称为Drawer。 This drawer plugin应该可以帮到你。

在此处下载插件：https://github.com/blivesta/drawer

Answer 2

为实现这一目标，有多种方式：

使用jquery插件，例如：

http://jpanelmenu.com/

http://www.sitepoint.com/10-jquery-sliding-sidebar-panel-plugins/

http://mmenu.frebsite.nl/

http://tympanus.net/Blueprints/SlidePushMenus/

http://multi-level-push-menu.make.rs/等。
使用Bootstrap等CSS框架

http://pivotallabs.com/html5-facebook-style-sliding-menu-using-twitter-bootstrap-collapse/ - 在bootstrap帮助下制作的示例菜单

http://jsfiddle.net/Osis/Mns8q/ - 示例菜单制作帮助引导

http://www.bootstrapzero.com/bootstrap-template/off-canvas-sidebar

http://jsbin.com/seqola/2/edit?html,css,js,output

对于bootstrap，您必须在头部

<head>
<script src="//code.jquery.com/jquery.min.js"></script>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/css/bootstrap.min.css" rel="stylesheet" type="text/css" />
<script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.0/js/bootstrap.min.js"></script>
 <meta charset=utf-8 />
 <title>JS Bin</title>
</head>

您可以使用jQuery Mobile panel。只是建议我知道你没有使用JQM

HTML应用程序 - 使用选择菜单等Gmail

2 个答案: