HTML - Tlačítko menu se stane zcela průhledné*

Veterans · Příspěvek od **Veterans** » 20 dub 2013 12:06

Zdravím. Mám problém s týmto HTML/CSS/jQuery
http://www.extremestudio.ro/blog/how-to-create-a-clean-windows-8-animated-colorful-menu-with-html-css-and-jquery/
Ide o to že mám portfólio na ktoré keď prídete tak sa Vám ukáže podobné menu (2/3 kocky) a s nich sa dostanete na rôzne weby. Lenže mám problém okým tam je originálne čierne pozadie tak je všetko OK lenže ja tam potrebujem dať obrázok .jpeg/png ktorý ma 3 farby (biela/šedá/čierna) keď ho tam vložím tak menu ide celkom dobre na to len je problém v tom že ak Vám ide to menu z Alfa/prehľadnosť 50% na 100% tak má ostať ale mne sa na tom pozadí (3 farebnóm) po cca pol sekunde stratí (myška ukazuje že tam tlačítko stále je ale nieje ho vidno. Môžete mi niekto poradiť ako to spraviť aby to tlačítko nemizlo??? Ďakujem.

CZechBoY · Příspěvek od **CZechBoY** » 20 dub 2013 15:46

zdravím,
nejlepší by bylo poslat odkaz na živý web nebo alespoň zdrojový kod html, css, js

Veterans · Příspěvek od **Veterans** » 20 dub 2013 19:38

HTML+SCRIPT:

Kód: Vybrat vše

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <link rel="stylesheet" href="css.css" type="text/css">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
<script type="text/javascript">
$(document).ready(function() {
 $('.menu a').hover(function() {
   $(this).stop().animate({
    opacity: 1
     }, 300);
     }, function() {
    $(this).stop().animate({
   opacity: 0.3
  }, 300);
 });
});
</script>
<body>
<div id="pozadie">                               
      <img src="obrazok.png" alt="pozadie" title="pozadie" width="1024" height="768" />           
    </div> 
  <div class="menu">
  <br /><br />
  <br /><br />
    <a class="yellow" href="#">Home</a>
    <a class="green" href="#">Blog</a>
    <a class="pink" href="#">Write for Us</a>
    <a class="purple" href="#">Themes</a>
    <a class="blue" href="#">Portfolio</a>
    <a class="orange" href="#">Contact</a>

  </div> 


  </body>
</html>

CSS:

Kód: Vybrat vše

/* CSS Document */
*{
margin: 0;
padding: 0;
}

body{
background: #111;
color: #FFF;
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-size: 16pt;
}

#pozadie img{
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
}

a{
color: #FFF;
text-decoration: none;
}

.menu{
width: 570px;
margin: 30px auto;
}

.menu a{
width: 180px;
line-height: 180px;
display: block;
margin: 4px;
text-align: center;
float:left;
opacity: 0.3;
}

.yellow{ background: #fdd22a; }
.blue{ background: #009fe3; }
.purple{ background: #574696; }
.orange{ background: #ee7202; }
.pink{ background: #e61c67; }
.green{ background: #96c11f; }

CZechBoY · Příspěvek od **CZechBoY** » 20 dub 2013 22:55

pošli to pozadí ještě, mě to s nějakým pozadím z googlu funguje normálně...

Veterans · Příspěvek od **Veterans** » 21 dub 2013 09:18

Veterans · Příspěvek od **Veterans** » 22 dub 2013 16:24

Niekto/CZechBoY nič???

CZechBoY · Příspěvek od **CZechBoY** » 22 dub 2013 16:26

nevim, asi chyba prohlížeče
koukni se co, dělá ta jquery funkce, jestli tam někde neblbne

Veterans · Příspěvek od **Veterans** » 22 dub 2013 17:01

Nakoniec jquerry tam nieje..... Je to vraj len ces HTML/CSS ..... ale v IE, Mozila, GoChrome to robí to iste.

CrazyC0de · Příspěvek od **CrazyC0de** » 22 dub 2013 17:39

No, jestli neví CZechBoY, tak na to těžko příjde někdo jiný....

neudy · Příspěvek od **neudy** » 22 dub 2013 18:35

Ahoj!
Řešením by mohlo být zanoření menu do divu s id=pozadie. Následně bych ještě pozadí nevkládal přes tag img. Jde přece o pozadí, takže bych použil css a background-image:url('obrazok.png').
HTML kód

Kód: Vybrat vše

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
  <link rel="stylesheet" href="css.css" type="text/css">
  <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
  </head>
<script type="text/javascript">
$(document).ready(function() {
 $('.menu a').hover(function() {
   $(this).stop().animate({
    opacity: 1
     }, 300);
     }, function() {
    $(this).stop().animate({
   opacity: 0.3
  }, 300);
 });
});
</script>
<body>
<div id="pozadie">                               
     
  <div class="menu">
  <br /><br />
  <br /><br />
    <a class="yellow" href="#">Home</a>
    <a class="green" href="#">Blog</a>
    <a class="pink" href="#">Write for Us</a>
    <a class="purple" href="#">Themes</a>
    <a class="blue" href="#">Portfolio</a>
    <a class="orange" href="#">Contact</a>

  </div>
 </div>

  </body>
</html>

CSS kód

Kód: Vybrat vše

/* CSS Document */
*{
margin: 0;
padding: 0;
}

body{
background: #111;
color: #FFF;
font-family:'Open Sans', sans-serif;
font-weight: 300;
font-size: 16pt;
}

#pozadie {
min-height: 100%;
min-width: 1024px;
width: 100%;
height: auto;
position: fixed;
top: 0;
left: 0;
background-image:url('obrazok.png');
}

a{
color: #FFF;
text-decoration: none;
}

.menu{
width: 570px;
margin: 30px auto;
}

.menu a{
width: 180px;
line-height: 180px;
display: block;
margin: 4px;
text-align: center;
float:left;
opacity: 0.3;
}

.yellow{ background: #fdd22a; }
.blue{ background: #009fe3; }
.purple{ background: #574696; }
.orange{ background: #ee7202; }
.pink{ background: #e61c67; }
.green{ background: #96c11f; }

Ten obrázek na pozadí má rozlišení 1024 px x 768 px takže na monitorech s vyšším rozlišením to nebude vypadat kvůli opakování moc dobře :) V příloze posílám složku s mnou upravenými soubory.

CZechBoY · Příspěvek od **CZechBoY** » 22 dub 2013 20:17

pokud tam není jquery tak jak teda zprůhledňuješ tu položku menu?

dovolíš si upozornit na jednu (2) chybu: pokud máš někde dvakrát za sebou odřádkování (<br>) tak je něco špatně (pozicování je otázka CSS); pokud hned na začátku nějakýho bloku máš odřádkování, je to taky chyba, viz. předchozí věta

CrazyC0de · Příspěvek od **CrazyC0de** » 22 dub 2013 20:22

Á, no vidíš, toho <br> jsem si ani nevšiml, co třeba takhle : position: relative;top: 50px;, nebo margin ?

PC-HELP.CZ

CNEWS

HTML - Tlačítko menu se stane zcela průhledné*

HTML - Tlačítko menu se stane zcela průhledné*

Re: Problém s Menu.

Re: Problém s Menu.

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*

Re: HTML - Tlačítko menu se stane zcela průhledné*