HTML KODLARI - Xp Menü

Kullanılan resimleri indirmek için tıklayınız.

Dosyalar

Link
Link
Link
Link
Link
Link
Link
Link
Link
Link

Bilgi

Açıklama
Açıklama
Açıklama
Açıklama

Detaylar

Açıklama
Açıklama
Açıklama
Açıklama

<style type="text/css">
                html{
                height:100%;
                }
                body{
                height:100%;
                margin:0px;
                padding:0px;
                font-family: Trebuchet MS, Lucida Sans Unicode, Arial, sans-serif;
                }
                /* Entire pane */
                #dhtmlgoodies_xpPane{
                background-color:#7190e0;	/* Blue background color */
                float:left;
                height:100%;
                width:200px;	/* Width of panel */
                }
                #dhtmlgoodies_xpPane .dhtmlgoodies_panel{
                margin-left:10px;
                margin-right:10px;
                margin-top:10px;
                }
                #dhtmlgoodies_xpPane .panelContent{
                font-size:0.7em;
                background-image:url('images/bg_pane_right.gif');
                background-position:top right;
                background-repeat:repeat-y;
                border-left:1px solid #FFF;
                border-bottom:1px solid #FFF;
                padding-left:2px;
                padding-right:2px;
                overflow:hidden;
                position:relative;
                }
                #dhtmlgoodies_xpPane .panelContent div{
                position:relative;
                }
                #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar{
                background-image:url('images/bg_panel_top_right.gif');
                background-repeat:no-repeat;
                background-position:top right;
                height:25px;
                padding-right:5px;
                }
                #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar span{	/* Heading text options */
                line-height:25px;
                vertical-align:middle;
                font-family:arial;	/* Arial font */
                font-size:0.7em;	/* Font size */
                color:#215DC6;	/* Light blue color */
                font-weight:bold;	/* Bold font */
                padding-left:5px; 	/* Space at the left */
                float:left;	/* Don't change this one */
                }
                #dhtmlgoodies_xpPane .dhtmlgoodies_panel .topBar img{
                float:right;
                cursor:pointer;
                }
                </style>
                <script type="text/javascript">
                /***********(C) www.dhtmlgoodies.com, October 2005 www.dhtmlgoodies.com	Alf Magne Kalleland *****/
                var xpPanel_slideActive = true;	// Slide down/up active?
                var xpPanel_slideSpeed = 15;	// Speed of slide
                var dhtmlgoodies_xpPane;
                var dhtmlgoodies_paneIndex;
                var savedActivePane = false;
                var savedActiveSub = false;
                function showHidePaneContent()
                {
                var img = this.getElementsByTagName('IMG')[0];
                var obj = document.getElementById('paneContent' + img.id.replace(/[^0-9]/g,''));
                if(img.src.toLowerCase().indexOf('up')>=0){
                img.src = img.src.replace('up','down');
                if(xpPanel_slideActive){
                obj.style.display='block';
                slidePane((xpPanel_slideSpeed*-1),obj.id);
                }else{
                obj.style.display='none';
                }
                }else{
                img.src = img.src.replace('down','up');
                if(xpPanel_slideActive){
                if(document.all){
                obj.style.display='block';
                obj.style.height = '1px';
                }
                slidePane(xpPanel_slideSpeed,obj.id);
                }else{
                obj.style.display='block';
                }
                }
                }
                function slidePane(slideValue,id)
                {
                var activePane = document.getElementById(id);
                if(activePane==savedActivePane){
                var subDiv = savedActiveSub;
                }else{
                var subDiv = activePane.getElementsByTagName('DIV')[0];
                }
                savedActivePane = activePane;
                savedActiveSub = subDiv;
                var height = activePane.offsetHeight;
                var innerHeight = subDiv.offsetHeight;
                height+=slideValue;
                if(height<0)height=0;
                if(height>innerHeight)height = innerHeight;
                if(document.all){
                activePane.style.filter = 'alpha(opacity=' + Math.round((height / subDiv.offsetHeight)*100) + ')';
                }else{
                var opacity = (height / subDiv.offsetHeight);
                if(opacity==0)opacity=0.01;
                if(opacity==1)opacity = 0.99;
                activePane.style.opacity = opacity;
                }
                if(slideValue<0){
                activePane.style.height = height + 'px';
                subDiv.style.top = height - subDiv.offsetHeight + 'px';
                if(height>0){
                setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);
                }else{
                if(document.all)activePane.style.display='none';
                }
                }else{
                subDiv.style.top = height - subDiv.offsetHeight + 'px';
                activePane.style.height = height + 'px';
                if(height<innerHeight){
                setTimeout('slidePane(' + slideValue + ',"' + id + '")',10);
                }
                }
                }
                function mouseoverTopbar()
                {
                var img = this.getElementsByTagName('IMG')[0];
                var src = img.src;
                img.src = img.src.replace('.gif','_over.gif');
                var span = this.getElementsByTagName('SPAN')[0];
                span.style.color='#428EFF';
                }
                function mouseoutTopbar()
                {
                var img = this.getElementsByTagName('IMG')[0];
                var src = img.src;
                img.src = img.src.replace('_over.gif','.gif');
                var span = this.getElementsByTagName('SPAN')[0];
                span.style.color='';
                }
                function initDhtmlgoodies_xpPane(panelTitles,panelDisplayed)
                {
                dhtmlgoodies_xpPane = document.getElementById('dhtmlgoodies_xpPane');
                var divs = dhtmlgoodies_xpPane.getElementsByTagName('DIV');
                dhtmlgoodies_paneIndex=0;
                for(var no=0;no<divs.length;no++){
                if(divs[no].className=='dhtmlgoodies_panel'){
                var outerContentDiv = document.createElement('DIV');
                var contentDiv = divs[no].getElementsByTagName('DIV')[0];
                outerContentDiv.appendChild(contentDiv);
                outerContentDiv.id = 'paneContent' + dhtmlgoodies_paneIndex;
                outerContentDiv.className = 'panelContent';
                var topBar = document.createElement('DIV');
                var span = document.createElement('SPAN');
                span.innerHTML = panelTitles[dhtmlgoodies_paneIndex];
                topBar.appendChild(span);
                topBar.onclick = showHidePaneContent;
                topBar.onmouseover = mouseoverTopbar;
                topBar.onmouseout = mouseoutTopbar;
                var img = document.createElement('IMG');
                img.id = 'showHideButton' + dhtmlgoodies_paneIndex;
                img.src = 'images/arrow_up.gif';
                topBar.appendChild(img);
                if(!panelDisplayed[dhtmlgoodies_paneIndex]){
                outerContentDiv.style.height = '0px';
                contentDiv.style.top = 0 - contentDiv.offsetHeight + 'px';
                if(document.all)outerContentDiv.style.display='none';
                img.src = 'images/arrow_down.gif';
                }
                topBar.className='topBar';
                divs[no].appendChild(topBar);
                divs[no].appendChild(outerContentDiv);
                dhtmlgoodies_paneIndex++;
                }
                }
                }
                </script>
                
                <div id="dhtmlgoodies_xpPane">
                <div class="dhtmlgoodies_panel">
                <div>
                
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net" target="_blank">Link</a><br>
                <a href="http://www.gezginler.net">Link</a>
                
                </div>
                </div>
                <div class="dhtmlgoodies_panel">
                <div>
                
                Açıklama<br>
                Açıklama<br>
                Açıklama<br>
                Açıklama
                
                </div>
                </div>
                <div class="dhtmlgoodies_panel">
                <div>
                
                Açıklama<br>
                Açıklama<br>
                Açıklama<br>
                Açıklama
                
                </div>
                </div>
                </div>
                <script type="text/javascript">
                /*
                Arguments to function
                1) Array of titles
                2) Array indicating initial state of panels(true = expanded, false = not expanded )
                */
                initDhtmlgoodies_xpPane(Array('Dosyalar','Bilgi','Detaylar'),Array(true,true,false));
                </script>