Home css html Navigasi Kanan dan Atas

Navigasi Kanan dan Atas

css , html

Kembali ke Navigation Bar

Source kode

<html><head>

<style id="page-skin-1" type="text/css"><!--
            .quickedit {display:none}
            body {
                background: #000000;
                color: #444444;
                font: x-small Trebuchet MS;
                font-size: small;
                text-align: left;
                margin: 0;
            }
            #winpz-nav {
                background: #fff;
                height: 40px;
                margin-left: 180px;
                width: 100%;
                position: fixed;
                top: 0;
                -moz-box-shadow: 0 0 2px #000);
                -webkit-box-shadow: 0 0 2x #000;
                -goog-ms-box-shadow: 0 0 2px #000;
                box-shadow: 0 0 2px #000;
                z-index: 999;
            }
            #left-winbar {
                width: 180px;
                float: left;
                height: 100%;
                background: #20282D;
                position: fixed;
                top: 0;
            }
            #winpznav ul {
                float: left;
                margin: 0;
                padding: 0;
                list-style-type: none;
            }
            #winpznav ul li {
                float: left;
            }
            #winpznav ul li a,
            #winpznav ul li a:visited {
                color: #3D7399;
                float: left;
                width: 100%;
                margin-right: 10px;
                padding: 8px 0;
                font: bold 14px arial;
                text-transform: none;
                transition: all 200ms ease-in-out;
                -webkit-transition: all 200ms ease-in-out;
                -moz-transition: all 200ms ease-in-out;
                -o-transition: all 200ms ease-in-out;
                -ms-transition: all 200ms ease-in-out;
            }
            #winpznav ul li a:hover {
                border-bottom: 5px solid #3D7399;
                text-decoration: none;
            }
            #winpznav img {
                margin: 0 5px -4px;
            }
            .logo {
                -webkit-transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-out;
                -o-transition: all .2s ease-out;
                transition: all .2s ease-out;
                margin-top: 30px;
                text-align: center;
            }
            .logo:hover {
                opacity: 0.8;
            }
            .winpic {
                width: 100%;
                padding-top: 10px;
            }
            .winpnav {
                width: 180px;
            }
            .winpnav ul {}
            .winpnav li {
                display: inline;
            }
            .winpnav li a {
                background: #232B30;
                /* old browsers */
                background: -moz-linear-gradient(top, #3D4850 3%, #313d45 4%, #232B30 100%);
                /* firefox */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #3D4850), color-stop(4%, #313d45), color-stop(100%, #232B30));
                /* webkit */
                filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#3D4850', endColorstr='#232B30', GradientType=0 );
                /* ie */
                outline: 0 none;
                padding: 8px 12px;
                display: block;
                color: rgb(159, 168, 176);
                font-weight: bold;
                text-shadow: 1px 1px rgb(31, 39, 43);
                border: 1px solid rgb(28, 37, 43);
                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                -webkit-transition: all .2s ease-in-out;
                -moz-transition: all .2s ease-out;
                -o-transition: all .2s ease-out;
                transition: all .2s ease-out;
                margin: 0 10px 10px -30px;
            }
            .winpnav li a:hover {
                color: #fff;
                background: #5F6B72;
                /* old browsers */
                background: -moz-linear-gradient(top, #5F6B72 3%, #56646C 4%, #4D5A62 50%, #434D54 100%);
                /* firefox */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #5F6B72), color-stop(4%, #56646C), color-stop(50%, #4D5A62), color-stop(100%, #434D54));
                /* webkit */
                filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#5F6B72', endColorstr='#434D54', GradientType=0 );
                /* ie */;
            }
            .winpnav li a:active {
                top: 0;
                background: #515B62;
                /* old browsers */
                background: -moz-linear-gradient(top, #515B62 3%, #444E55 5%, #394147 100%);
                /* firefox */
                background: -webkit-gradient(linear, left top, left bottom, color-stop(3%, #515B62), color-stop(5%, #444E55), color-stop(100%, #394147));
                /* webkit */
                filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#515B62', endColorstr='#394147', GradientType=0 );
                /* ie */
                -moz-box-shadow: 1px 1px 1px rgba(255, 255, 255, 0.1);
                /* Firefox */
                -moz-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                /* Firefox */
                -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                /* Safari, Chrome */
                box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.2);
                /* CSS3 */;
            }
            .winpnav img {
                margin: 0 10px -3px -5px;
            }

--></style>
    <body>
        <div id="left-winbar" data-undefined_set="top" data-undefined_set_top="34px" data-apn-toolbar-adjusted="34px" style="top: 34px;">
            <div class="logo">
<a href=""><img src="logo.png"></a></div>
<div class="winpic">
                <div class="winpnav">
                    <ul>
<li><a href=""><img src="">AutoCAD</a></li>
<li><a href=""><img src="">3DsMAX</a></li>
<li><a href=""><img src="">Blogger</a></li>
<li><a href=""><img src="">Windows</a></li>
<li><a href=""><img src="">Android</a></li>
<li><a href=""><img src="">Hiburan</a></li>
</ul>
</div>
</div>
</div>
<div id="winpz-nav" data-undefined_set="top" data-undefined_set_top="34px" data-apn-toolbar-adjusted="34px" style="top: 34px;">
            <div id="winpznav">
                <ul>
<li><a href=""><img src=""><span>Beranda</span></a></li>
<li><a href=""><img src=""><span>Daftar Isi</span></a></li>
<li><a href=""><img src=""><span>Tentang</span></a></li>
</ul>
</div>
</div>
</body>

</html>

Silahkan Download

0 komentar:

Posting Komentar

Langganan: Posting Komentar ( Atom )