Pentru a accesa toate paginile forumului
te rugăm să te înregistrezi
[ Cereri şabloane · Ultimile postări · Membrii · Regulamentul forumului · Căutare · RSS · Photoshop ]
  • Pagina 1 din 4
  • 1
  • 2
  • 3
  • 4
  • »
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Aspecte » Aspectul Meniului [Vertical]
Aspectul Meniului [Vertical]
StapanulData: Duminică, 2012-06-10, 2:57 PM | Mesaj # 1
Neconectat
 Aspectul Meniului pentru site-uri cu şablon întunecat.
Intalare: Panoul de Control - Design - Administrarea design-ului (şabloane) - Secţiuni globale [Primul recipient](dacă Meniul e în partea dreaptă a site-ului, atunci intrăm în Al doilea recipient) - şi căutăm codul $SMENU_1$. Îl schimbăm cu:

Code
<!-- <Menu by Stăpânul> -->
<style>
.meniul {width:186px; margin:0px; padding:0px; list-style:none; font-family: Tahoma;border-top:0px solid #484747;border-bottom:0px solid #484747;}
.meniul li {align:center; height:27px; display:block; background:url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/fundal.gif) no-repeat 0 0;text-indent:10px;font-size:11px;}
.meniul li:hover {background:url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/fundal_2.gif) no-repeat 0 0;}
.meniul li:hover a:link,
.meniul li:hover a:active,
.meniul li:hover a:visited {color:#dedede;text-shadow:0 0 3px #313131;padding-top:3;}
.meniul li:first-child {border:0;}
.meniul li a:link,
.meniul li a:active,
.meniul li a:visited {height:22px; display:block; color:#959595;padding-top:3;}
.meniul li a:hover {text-decoration:none; text-shadow:0 0 3px #313131;}
.rblock{
color:#969696;
text-shadow: 0.1em 0.1em #141414;
}
.rblock1{
color:#565656;
text-shadow: 0.1em 0.1em #000000;
}
</style>
<!-- </Menu by Stăpânul> -->

<ul class="meniul">
<li><a href="ADRESA 1" title="Principala"><span class="rblock">Pagina principală</span></a> </li>
<li><a href="ADRESA 2" title="Oaspeţi"><span class="rblock">Carte pentru oaspeţi</span></a></li>
<li><a href="ADRESA 3" title="Fişiere"><span class="rblock">Catalog de fişiere</span></a></li>
<li><a href="ADRESA 4" title="Articole"><span class="rblock">Catalog de articole</span></a> </li>
<li><a href="ADRESA 4" title="Contact"><span class="rblock">Contactaţi-ne</span></a> </li>
<li><a href="ADRESA 4" title="Forum"><span class="rblock">Forum</span></a> </li>
<li><a href="ADRESA 4" title="Nu ştiu"><span class="rblock">Întrebări</span></a> </li>
</ul>


Rezultatul:

Pomul se cunoaşte după roade, omul după fapte.
 
StapanulData: Luni, 2012-06-11, 11:57 AM | Mesaj # 2
Neconectat
 Intalare: Panoul de Control - Design - Administrarea design-ului (CSS) - şi adăugăm codul:

Code
#menu {width:274px;font-family:arial;}
ul {list-style:none;margin:0;padding:0;}
#menu ul li {margin:0 0 3px 0;}
#menu li a {height:26px;text-decoration: none;font-size:13px;text-align:left;}    
#menu li a:link, #menu li a:visited {color:#65614c;display:block;background:url('http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Fundal_alb.png');padding:10px 0 0 40px;}
#menu li a:hover {background:url('http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Fundal_alb_2.png');color:#807c6a;}


În block-ul unde doriţi Meniul, adăugaţi acest cod:

Code
<div id="menu">
<ul>
<li><a href="/">Pagina principală</a></li>
<li><a href="/forum">Informaţii despre site</a></li>
<li><a href="/">Catalog de fişiere</a></li>
<li><a href="/">Catalog de articole</a></li>
<li><a href="/">Carte pentru oaspeţi</a></li>
<li><a href="/">Forum</a></li>
</ul>
</div>


Puteţi schimba mărimea Meniu-lui de aici - #menu {width:274px;font-family:arial;}

Rezultatul:

Pomul se cunoaşte după roade, omul după fapte.
 
StapanulData: Miercuri, 2012-06-13, 12:03 PM | Mesaj # 3
Neconectat
 Meniu în formă de Windows 7. Dacă nu doriţi imaginea cu windows să apară pe tot fundalul site-ului, scoateţi codurile <head>, </head>, body şi <body>. Aici puteţi vedea o demonstraţie.

Code
<head>
    <title>Windows 7 menu http://fierbinte.ucoz.ro/</title>
    <script src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/bun_venit.js" type="text/javascript"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    $("#bkg1").click(function(){
    $("body").css("background","#fff url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/bkg.jpg) no-repeat scroll center center");
    });    
    $("#bkg2").click(function(){
    $("body").css("background","#fff url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/bkg2.jpg) no-repeat scroll center center");
    });    
    $("#bkg3").click(function(){
    $("body").css("background","#fff url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/bkg3.jpg) no-repeat scroll center center");
    });    
    });
    </script>
    <style type="text/css">
    body { font-family:Segoe UI, Arial, Sans-Serif; font-size:12px; color:#4b4b4b; background:#fff url(http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/bkg.jpg) no-repeat scroll center center;}
    #meta { position:absolute; top:70px; right:20px; }
    #meta div { padding:20px; color:#000; margin: 0 0 20px;
    -moz-border-radius:5px;-webkit-border-radius:5px;
    background:rgba(255,255,255,0.50)}
    #meta a {color:#005aff;}
    #meta a img {margin:0 10px 0 0; border:solid 1px #000;}    
       
    #startmenu { border:solid 1px #102a3e; overflow:visible; display:inline-block; margin:60px 0 0 20px;
    -moz-border-radius:5px;-webkit-border-radius:5px; position:relative;
    box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#619bb9;
    background: -moz-linear-gradient(top, rgba(50, 123, 165, 0.75), rgba(46, 75, 90, 0.75) 50%, rgba(92, 176, 220, 0.75));
    background: -webkit-gradient(linear, center top, center bottom, from(#327aa4),color-stop(45%, #2e4b5a), to(#5cb0dc)); }
    #programs, #links {float:left; display:block; padding:0; list-style:none;}
    #programs { background:#fff; border:solid 1px #365167; margin:7px 0 7px 7px;
    box-shadow: 0 0 1px #fff; -moz-box-shadow: 0 0 1px #fff; -webkit-box-shadow: 0 0 1px #fff;
    -moz-border-radius:3px;-webkit-border-radius:3px;}
    #programs a { border:solid 1px transparent; display:block; padding:3px; margin:3px;    
    color:#4b4b4b; text-decoration:none; min-width:220px;}
    #programs a:hover {border:solid 1px #7da2ce;    
    -moz-border-radius:3px; -webkit-border-radius:3px;
    box-shadow: inset 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#cfe3fd;
    background: -moz-linear-gradient(top, #dcebfd, #c2dcfd);
    background: -webkit-gradient(linear, center top, center bottom, from(#dcebfd), to(#c2dcfd));}
    #programs a img {border:0; vertical-align:middle; margin:0 5px 0 0;}    
    #links {margin:7px; margin-top:-30px;}
    #links li.icon {text-align:center;}
    #links a {border:solid 1px transparent; display:block; margin:5px 0; position:relative;
    color:#fff; text-decoration:none; min-width:120px;}
    #links a:hover {border:solid 1px #000;
    -moz-border-radius:3px; -webkit-border-radius:3px;
    box-shadow: 0 0 1px #fff; -moz-box-shadow: inset 0 0 1px #fff; -webkit-box-shadow: inset 0 0 1px #fff;
    background-color:#658da0;
    background: -moz-linear-gradient(center left, rgba(81,115,132,0.55), rgba(121,163,184,0.55) 50%, rgba(81,115,132,0.55));
    background: -webkit-gradient(linear, 0% 100%, 100% 100%, from(#517384), color-stop(50%, #79a3b8), to(#517384));    
    }
    #links a span { padding:5px; display:block; }
    #links a:hover span { background: -moz-linear-gradient(center top, transparent, transparent 49%, rgba(2,37,58,0.5) 50%, rgba(63,111,135,0.5));
    background: -webkit-gradient(linear, center top, center bottom, from(transparent), color-stop(49%, transparent),    
    color-stop(50%, rgba(2,37,58,0.5)), to(rgba(63,111,135,0.5))); }
    </style>
</head>
<body>
    <div id="startmenu">
    <ul id="programs">
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Programe_Block/9firefox.ico" alt="" />Mozilla Firefox</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Programe_Block/11chrome.ico" alt="" />Google Chrome</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Programe_Block/safari.png" alt="" />Safari</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Programe_Block/10opera.ico" alt="" />Opera</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Diverse/Programe_Block/12ie.ico" alt="" />Internet Explorer</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/rss_32.png" alt="" />RSS Feeds</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/twitter_32.png" alt="" />Twitter</a></li>
    <li><a href="ADRESA"><img src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/delicious_32.png" alt="" />Delicious</a></li>
    </ul>
    <ul id="links">
    <li class="icon"><img src="http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Windows_7/folder.png" alt="" /></li>
    <li><a href="ADRESA"><span>Tot pentru Web Master</span></a></li>
    <li><a href="ADRESA"><span>Şabloane</span></a></li>
    <li><a href="ADRESA"><span>Scripturi</span></a></li>
    <li><a href="ADRESA"><span>Plugin-uri</span></a></li>
    <li><a href="ADRESA"><span>Componente</span></a></li>
    <li><a href="ADRESA"><span>Lansări</span></a></li>
    </ul>
    </div>
    </div>


Rezultatul:

Pomul se cunoaşte după roade, omul după fapte.
 
StapanulData: Vineri, 2012-06-29, 1:15 PM | Mesaj # 4
Neconectat
 Intalare: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugăm stilul:

Code
#menu_t {color:#000;border-bottom:1px solid #ccc;border-top:1px solid #fff;font-family:tahoma;font-size:13px;padding:5px 7px 5px 7px;}
#menu_t:hover {background-color:#ccc;padding:5px 7px 5px 21px;color:#3B5998;border-top:1px solid #ccc;}
#menu_t a{text-decoration:none;font-family:tahoma;font-size:13px;color:#000;}
#menu_t a:hover{color:#3B5998;}


În block-ul unde doriţi Meniul, adăugaţi acest cod:

Code
<div id="menu_t"><a href="">Principală</a></div>
<div id="menu_t"><a href="">Fişiere</a></div>
<div id="menu_t"><a href="">Articole</a></div>
<div id="menu_t"><a href="">Forum</a></div>
<div id="menu_t"><a href="/">Filme On</a></div>


Rezultatul:

Pomul se cunoaşte după roade, omul după fapte.
 
OmulPaianjenData: Duminică, 2012-07-15, 7:36 PM | Mesaj # 5
Neconectat
 Meniu în stilul iOS

Pasul 1: Panoul de Control - Design - Administrarea design-ului (CSS) - adăugați stilul:

Code
.popover {  
  position: relative;  
  z-index: 10;  
  width: 300px;  
  padding: 5px;  
  border: 1px solid #000;  
  border-radius: 11px;  
  background-color: #606060;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #606060), color-stop(100%, #4a4a4a));  
  background-image: -webkit-linear-gradient(top, #606060, #4a4a4a);  
  background-image: -moz-linear-gradient(top, #606060, #4a4a4a);  
  background-image: -ms-linear-gradient(top, #606060, #4a4a4a);  
  background-image: -o-linear-gradient(top, #606060, #4a4a4a);  
  background-image: linear-gradient(top, #606060, #4a4a4a);  
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);  
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 1px rgba(255, 255, 255, 0.2), inset 1px 0 rgba(255, 255, 255, 0.08), inset -1px 0 rgba(255, 255, 255, 0.08), 0 2px 8px rgba(0, 0, 0, 0.5);  
  }  
  .popover:before, .popover:after, .popover ul:before {  
  display: block;  
  content: '';  
  width: 0;  
  height: 0;  
  position: absolute;  
  z-index: 11;  
  left: 22px;  
  border: 7px outset transparent;  
  }  
  .popover:before {  
  border-bottom: 7px solid #000;  
  top: -14px;  
  }  
  .popover:after {  
  border-bottom: 7px solid #888;  
  top: -13px;  
  }  
  .popover ul:before {  
  z-index: 12;  
  border-bottom: 8px solid #666;  
  top: -12px;  
  }  
  .popover ul {  
  overflow: hidden;  
  background: #fff;  
  border: 1px solid #000;  
  border-radius: 7px;  
  -webkit-box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);  
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.4), 0 1px 1px rgba(255, 255, 255, 0.1), 0 1px rgba(255, 255, 255, 0.1);  
  }  
  .popover li {  
  display: block;  
  }  
  .popover li + li {  
  border-top: 1px solid #eee;  
  }  
  .popover li:first-child a {  
  border-radius: 7px 7px 0 0;  
  }  
  .popover li:last-child a {  
  border-radius: 0 0 7px 7px;  
  }  
  .popover a {  
  position: relative;  
  display: block;  
  line-height: 44px;  
  padding: 0 15px 0 48px;  
  color: #000;  
  font-size: 16px;  
  font-weight: bold;  
  }  
  .popover a:hover {  
  text-decoration: none;  
  background: #fff;  
  -webkit-box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);  
  box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);  
  }  
  .popover a:before, .popover a:after {  
  position: absolute;  
  display: block;  
  content: '';  
  }  

  .popover a:before, .popover .active a:active:before {  
  height: 20px;  
  width: 20px;  
  top: 12px;  
  left: 14px;  
  border: 0;  
  border-radius: 11px;  
  background: #f7f7f7;  
  -webkit-box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);  
  box-shadow: inset 0 1px 1px 1px rgba(0, 0, 0, 0.2), inset 0 5px 5px rgba(0, 0, 0, 0.1);  
  }  
  .popover a:after, .popover .active a:active:after {  
  display: none;  
  width: 11px;  
  height: 9px;  
  top: 18px;  
  left: 19px;  
  background: url("http://fierbinte.ucoz.ro/Forum/Aspect/Meniu/Sageata_mica.gif") center center no-repeat;  
  }  
  .popover .active a:before, .popover a:active:before {  
  top: 11px;  
  left: 13px;  
  border: 1px solid #111;  
  background-color: #555555;  
  background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #777777), color-stop(100%, #404040));  
  background-image: -webkit-linear-gradient(top, #777777, #404040);  
  background-image: -moz-linear-gradient(top, #777777, #404040);  
  background-image: -ms-linear-gradient(top, #777777, #404040);  
  background-image: -o-linear-gradient(top, #777777, #404040);  
  background-image: linear-gradient(top, #777777, #404040);  
  -webkit-box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);  
  box-shadow: inset 0 1px rgba(255, 255, 255, 0.3), 0 1px 2px rgba(0, 0, 0, 0.4);  
  }  
  .popover .active a:after, .popover a:active:after {  
  display: block;  
  }


Pasul 2: Unde doriți Meniul, adăugați codul:

Code
<div class="popover">  
  <ul>  
  <li class="active"><a href="/">Adrese</a></li>  
  <li class="active"><a href="/">Parole</a></li>  
  <li><a href="/">Favorite</a></li>  
  <li><a href="/">Filme</a></li>  
  <li><a href="/">Muzică</a></li>  
  </ul>  
  </div>


Rezultatul:
 
Scripturi și teme pentru ucoz » Scripturi şi şabloane » Aspecte » Aspectul Meniului [Vertical]
  • Pagina 1 din 4
  • 1
  • 2
  • 3
  • 4
  • »
Căutare:
Copyright © 2019. Toate drepturile rezervate
Politicieni | Acţiunea 2012 | Powered by uCoz