iPhone Like Menu Arrangement for Web

Thulasee Shan

Rate me:

4.92/5 (8 votes)

9 Jul 2009CPOL5 min read

41.8K

754

Implementation of iPhone like menu arrangement for the web user interface

iphonemenu.zip
- source
  - HTMLPage1.htm
  - imgs
    - 3D Studio Max 6.png
    - ACDSee.png
    - Ad Aware.png
    - Adobe Acrobat 3D CS2.png
    - Adobe Lightroom CS3.png
    - Adobe Pagemaker CS3.png
    - AIM.png
    - Alcohol 52.png
    - Apple.png
    - Atari.png
    - largeBack.gif
    - Lego Digital Designer.png
    - Limewire.png
    - Linked In.png
    - logo_small.jpg
    - Macromedia Flash.png
    - Maxthon.png
    - Maya.png
    - McAfee Security Center.png
    - Megaupload.png
    - Microsoft Media Center.png
    - Microsoft Office Access.png
    - Microsoft Office Frontpage.png
    - Microsoft Office Onenote.png
    - Thumbs.db
    - Wyzo.png
    - Xion Media Player.png
    - Yahoo Widgets.png
  - iscript.js

<!-- saved from url=(0022)http://internet.e-mail -->
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>Untitled Page</title>

    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/yuiloader/yuiloader-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dom/dom-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/event/event-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/dragdrop/dragdrop-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/animation/animation-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/element/element-min.js"></script>
    <script type="text/javascript" src="http://yui.yahooapis.com/2.7.0/build/button/button-min.js"></script>
    <script type="text/javascript" src="iscript.js"></script>

    <style type="text/css">
        body
        {
            background-color:gray;
        } 
        
        .mainArea
        {
            margin:auto;
            width:1020px;
            background-color:white;
            height:750px;
        }
        
        .LeftMenu
        {
            position:relative;
            display:block;
            width:160px;
            margin-right:5px;
            padding-top:5px;
            height:25px;
            border:solid 1px white;
            text-indent:5pt;
            border-left:solid 5px blue; 
            background-color:lightgray; 
            color: black;
            font-family:Arial;
            font-size:12px;
        }
        
        .ItemTitle {
            font-family:Arial;
            font-size:12px;
            font-weight:bold;
            margin-left:10px;
            margin-top:20px;
            text-shadow: rgba(0,0,0,.4) 0px 2px 5px;
        }
        
        .ItemDesc {
            font-family:Arial;
            font-size:10px;
            float:left;
            display:inline-block;
            width:120px;
            margin-left:10px;
        }
        
        .ProductItem {
            position:absolute;
            border:none;
            text-align:left;
            color:black;
            cursor:move;
            height:76px;
            width:205px;
            clear:both;
            background-image:url(imgs/largeback.gif);
        }
        
        .ProductItem img
        {
            height:60px;
            width:60px;
        }

        .ItemBase { 
            z-index:-1;
            position:relative;
            border:2px solid white;
            text-align:center;
            color:white;
            height:76px;
            width:205px;
            float:left;
        }
        
    </style>

</head>
<body>
    <div class="mainArea">
        <div>
            <img src="imgs/logo_small.jpg" border="0" />
        </div>
        <div style="float: left; height: 600px; background-color:White;">
            <div class="LeftMenu" onmouseover="MouseIn(this);" onmouseout="MouseOut(this);">
                Home</div>
            <div class="LeftMenu" onmouseover="MouseIn(this);" onmouseout="MouseOut(this);">
                About Us</div>
            <div class="LeftMenu" onmouseover="MouseIn(this);" onmouseout="MouseOut(this);">
                Products</div>
            <div class="LeftMenu" onmouseover="MouseIn(this);" onmouseout="MouseOut(this);">
                Help</div>
        </div>
        <div style="height:600px;background-color:White;">
            <div id="ProductItem-1" class="ProductItem">
                <span class="ItemTitle">Yahoo Widgets</span><br />
                <img style="float: right" src="imgs/Yahoo Widgets.png" /><span class="ItemDesc">Yahoo
                    Widgets.png</span></div>
            <div id="ProductItem-2" class="ProductItem">
                <span class="ItemTitle">Xion Media Player</span><br />
                <img style="float: right" src="imgs/Xion Media Player.png" /><span class="ItemDesc">Xion
                    Media Player.png</span></div>
            <div id="ProductItem-3" class="ProductItem">
                <span class="ItemTitle">Wyzo</span><br />
                <img style="float: right" src="imgs/Wyzo.png" /><span class="ItemDesc">Wyzo.png</span></div>
            <div id="ProductItem-4" class="ProductItem">
                <span class="ItemTitle">3D Studio Max 6</span><br />
                <img style="float: right" src="imgs/3D Studio Max 6.png" /><span class="ItemDesc">3D
                    Studio Max 6.png</span></div>
            <div id="ProductItem-5" class="ProductItem">
                <span class="ItemTitle">Microsoft Office Onenote</span><br />
                <img style="float: right" src="imgs/Microsoft Office Onenote.png" /><span class="ItemDesc">Microsoft
                    Office Onenote.png</span></div>
            <div id="ProductItem-6" class="ProductItem">
                <span class="ItemTitle">Microsoft Office Frontpage</span><br />
                <img style="float: right" src="imgs/Microsoft Office Frontpage.png" /><span class="ItemDesc">Microsoft
                    Office Frontpage.png</span></div>
            <div id="ProductItem-7" class="ProductItem">
                <span class="ItemTitle">Microsoft Office Access</span><br />
                <img style="float: right" src="imgs/Microsoft Office Access.png" /><span class="ItemDesc">Microsoft
                    Office Access.png</span></div>
            <div id="ProductItem-8" class="ProductItem">
                <span class="ItemTitle">Microsoft Media Center</span><br />
                <img style="float: right" src="imgs/Microsoft Media Center.png" /><span class="ItemDesc">Microsoft
                    Media Center.png</span></div>
            <div id="ProductItem-9" class="ProductItem">
                <span class="ItemTitle">Megaupload</span><br />
                <img style="float: right" src="imgs/Megaupload.png" /><span class="ItemDesc">Megaupload.png</span></div>
            <div id="ProductItem-10" class="ProductItem">
                <span class="ItemTitle">McAfee Security Center</span><br />
                <img style="float: right" src="imgs/McAfee Security Center.png" /><span class="ItemDesc">McAfee
                    Security Center.png</span></div>
            <div id="ProductItem-11" class="ProductItem">
                <span class="ItemTitle">Maya</span><br />
                <img style="float: right" src="imgs/Maya.png" /><span class="ItemDesc">Maya.png</span></div>
            <div id="ProductItem-12" class="ProductItem">
                <span class="ItemTitle">Maxthon</span><br />
                <img style="float: right" src="imgs/Maxthon.png" /><span class="ItemDesc">Maxthon.png</span></div>
            <div id="ProductItem-13" class="ProductItem">
                <span class="ItemTitle">Macromedia Flash</span><br />
                <img style="float: right" src="imgs/Macromedia Flash.png" /><span class="ItemDesc">Macromedia
                    Flash.png</span></div>
            <div id="ProductItem-14" class="ProductItem">
                <span class="ItemTitle">Linked In</span><br />
                <img style="float: right" src="imgs/Linked In.png" /><span class="ItemDesc">Linked In.png</span></div>
            <div id="ProductItem-15" class="ProductItem">
                <span class="ItemTitle">Limewire</span><br />
                <img style="float: right" src="imgs/Limewire.png" /><span class="ItemDesc">Limewire.png</span></div>
            <div id="ProductItem-16" class="ProductItem">
                <span class="ItemTitle">Lego Digital Designer</span><br />
                <img style="float: right" src="imgs/Lego Digital Designer.png" /><span class="ItemDesc">Lego
                    Digital Designer.png</span></div>
            <div id="ProductItem-17" class="ProductItem">
                <span class="ItemTitle">Atari</span><br />
                <img style="float: right" src="imgs/Atari.png" /><span class="ItemDesc">Atari.png</span></div>
            <div id="ProductItem-18" class="ProductItem">
                <span class="ItemTitle">Apple</span><br />
                <img style="float: right" src="imgs/Apple.png" /><span class="ItemDesc">Apple.png</span></div>
            <div id="ProductItem-19" class="ProductItem">
                <span class="ItemTitle">Alcohol 52</span><br />
                <img style="float: right" src="imgs/Alcohol 52.png" /><span class="ItemDesc">Alcohol
                    52.png</span></div>
            <div id="ProductItem-20" class="ProductItem">
                <span class="ItemTitle">AIM</span><br />
                <img style="float: right" src="imgs/AIM.png" /><span class="ItemDesc">AIM.png</span></div>
            <div id="ProductItem-21" class="ProductItem">
                <span class="ItemTitle">Adobe Pagemaker CS3</span><br />
                <img style="float: right" src="imgs/Adobe Pagemaker CS3.png" /><span class="ItemDesc">Adobe
                    Pagemaker CS3.png</span></div>
            <div id="ProductItem-22" class="ProductItem">
                <span class="ItemTitle">Adobe Lightroom CS3</span><br />
                <img style="float: right" src="imgs/Adobe Lightroom CS3.png" /><span class="ItemDesc">Adobe
                    Lightroom CS3.png</span></div>
            <div id="ProductItem-23" class="ProductItem">
                <span class="ItemTitle">Adobe Acrobat 3D CS2</span><br />
                <img style="float: right" src="imgs/Adobe Acrobat 3D CS2.png" /><span class="ItemDesc">Adobe
                    Acrobat 3D CS2.png</span></div>
            <div id="ProductItem-24" class="ProductItem">
                <span class="ItemTitle">Ad Aware</span><br />
                <img style="float: right" src="imgs/Ad Aware.png" /><span class="ItemDesc">Ad Aware.png</span></div>

            <div id="ItemBase-1" class="ItemBase">
            </div>
            <div id="ItemBase-2" class="ItemBase">
            </div>
            <div id="ItemBase-3" class="ItemBase">
            </div>
            <div id="ItemBase-4" class="ItemBase">
            </div>
            <div id="ItemBase-5" class="ItemBase">
            </div>
            <div id="ItemBase-6" class="ItemBase">
            </div>
            <div id="ItemBase-7" class="ItemBase">
            </div>
            <div id="ItemBase-8" class="ItemBase">
            </div>
            <div id="ItemBase-9" class="ItemBase">
            </div>
            <div id="ItemBase-10" class="ItemBase">
            </div>
            <div id="ItemBase-11" class="ItemBase">
            </div>
            <div id="ItemBase-12" class="ItemBase">
            </div>
            <div id="ItemBase-13" class="ItemBase">
            </div>
            <div id="ItemBase-14" class="ItemBase">
            </div>
            <div id="ItemBase-15" class="ItemBase">
            </div>
            <div id="ItemBase-16" class="ItemBase">
            </div>
            <div id="ItemBase-17" class="ItemBase">
            </div>
            <div id="ItemBase-18" class="ItemBase">
            </div>
            <div id="ItemBase-19" class="ItemBase">
            </div>
            <div id="ItemBase-20" class="ItemBase">
            </div>
            <div id="ItemBase-21" class="ItemBase">
            </div>
            <div id="ItemBase-22" class="ItemBase">
            </div>
            <div id="ItemBase-23" class="ItemBase">
            </div>
            <div id="ItemBase-24" class="ItemBase">
            </div>
        </div>
    </div>
</body>
</html>

By viewing downloads associated with this article you agree to the Terms of Service and the article's licence.

If a file you wish to view isn't highlighted, and is a text file (not binary), please let us know and we'll add colourisation support for it.

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Written By

Thulasee Shan

Software Developer (Senior) eHips Ltd

United Kingdom

Having more than 10 years experience in software development and currently working for eHips Ltd in Oxford, UK. Expert in C# and VB.NET. Also Expert in technologies such as GDI+, ADO.NET, XML, XSD etc. Started the career as a VB6.0 developer and moved on to .NET with its beta release. Experience includes real-time system development, distributed systems, Work flow systems, control system development and web 2.0 systems.

iPhone Like Menu Arrangement for Web

License

Comments and Discussions