| Autor | Zpráva | ||
|---|---|---|---|
| hynek123456 Profil |
#1 · Zasláno: 17. 3. 2015, 10:48:35
Ahoj,
už jak dlouho se snažím o jednu věc: 1)Mám 2 stránky, na každý stránce mám šipku, a chci aby po kliknutí stránka přejela doleva(pomalu, ne aby se to jen odkázalo) a naopak to samé. Dám vám sem odkaz a budu rád kdyby mi někdo pomohl. 2) v kódu je vidět JS(MENU), to se mi tam podařilo dát, ale teď nevím co mám dělat aby se mi to menu zobrazovalo, protože teď se pouze mění ikona ale nic se nestane. Díky moc. :) <html>
<head>
<title>TEST</title>
<style>
body{background-color: #c37c82; font-family: Canon; color: #cecece;}
#vse{}
#spodnilista{position: fixed; left: 0%; top: 94%; background-color: #925c61; height: 6%; width: 100%;}
#pravalista{position: fixed; left: 96%; top: 0%; background-color: #925c61; height: 100%; width: 4%;}
#center{text-align: center; margin-top: 35%; height: 100px;}
#center0{text-align: center;}
#center1{text-align: center;}
#logo{width: 20%; float: left; margin-top: -3%}
#uvod{margin-left: 20%; width: 60%;}
#text{text-align: center; width: 70%; float: right; margin-right: 6%}
#doprava{position: fixed; left: 94%; top: 45%; height: 9%;}
#dolu{position: fixed; left: 45%; top: 90%; height: 9%;}
#menu{position: fixed; left: 2%; top: 3%;}
#menupicture{height: 8%;}
.tcon {
appearance: none;
border: none;
cursor: pointer;
display: -webkit-flex;
display: -ms-flexbox;
display: flex;
-webkit-justify-content: center;
-ms-flex-pack: center;
justify-content: center;
-webkit-align-items: center;
-ms-flex-align: center;
align-items: center;
height: 40px;
transition: 0.3s;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
width: 40px;
background: transparent;
outline: none; }
.tcon > * {
display: block; }
.tcon:hover, .tcon:focus {
outline: none; }
.tcon::-moz-focus-inner {
border: 0; }
.tcon-menu__lines {
display: inline-block;
height: 5.71429px;
width: 40px;
border-radius: 2.85714px;
transition: 0.3s;
background: black;
position: relative; }
.tcon-menu__lines::before, .tcon-menu__lines::after {
display: inline-block;
height: 5.71429px;
width: 40px;
border-radius: 2.85714px;
transition: 0.3s;
background: black;
content: '';
position: absolute;
left: 0;
-webkit-transform-origin: 2.85714px center;
transform-origin: 2.85714px center;
width: 100%; }
.tcon-menu__lines::before {
top: 10px; }
.tcon-menu__lines::after {
top: -10px; }
.tcon-transform .tcon-menu__lines {
-webkit-transform: scale3d(.8, .8, .8);
transform: scale3d(.8, .8, .8); }
.tcon-menu--xcross {
width: auto; }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines {
background: transparent; }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::before, .tcon-menu--xcross.tcon-transform .tcon-menu__lines::after {
-webkit-transform-origin: 50% 50%;
transform-origin: 50% 50%;
top: 0;
width: 40px; }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::before {
-webkit-transform: rotate3d(0, 0, 1, 45deg);
transform: rotate3d(0, 0, 1, 45deg); }
.tcon-menu--xcross.tcon-transform .tcon-menu__lines::after {
-webkit-transform: rotate3d(0, 0, 1, -45deg);
transform: rotate3d(0, 0, 1, -45deg); }
.tcon-visuallyhidden {
border: 0;
clip: rect(0 0 0 0);
height: 1px;
margin: -1px;
overflow: hidden;
padding: 0;
position: absolute;
width: 1px; }
.tcon-visuallyhidden:active, .tcon-visuallyhidden:focus {
clip: auto;
height: auto;
margin: 0;
overflow: visible;
position: static;
width: auto; }
</style>
</head>
<body>
<div id="pravalista">
<a href="file:///C:/Users/Host/Desktop/index.html"><img src="doprava.png" id="doprava"></a>
</div>
<div id="spodnilista">
<a href="file:///C:/Users/Host/Desktop/index.html"><img src="dolu.png" id="dolu"></a>
</div>
<div id="vse">
<div id="menu">
<button type="button" class="tcon tcon-menu--xcross" aria-label="toggle menu">
<span class="tcon-menu__lines" aria-hidden="true"></span>
<span class="tcon-visuallyhidden">toggle menu</span>
</button>
<script src="menu.js"></script>
<script>transformicons.add('.tcon')</script>
</div>
<div id="uvod">
<div id="center">
<div id="center0">
<img src="1framelogo.png" id="logo">
<p>
<font size="7">My name is <u><b>JOHN DOE</b></u></font><br>
<font size="5">I'm <u>Photographer</u> and <u>webdesigner</u>.</font>
</p>
</div>
<div id="center1">
<p id="text">
<font size="3">Donec vitae arcu, Mauris suscipit, ligula sit amet pharetra semper,
nibh ante cursus purus, vel sagittis velit mauris vel metus.
In sem justo, commodo ut, suscipit at, pharetra vitae, orci.</font>
</p>
</div>
</div>
</div>
</div>
</body>
</html> |
||
| Keeehi Profil |
#2 · Zasláno: 17. 3. 2015, 11:05:16
1) Hodně komplexní záležitost. S CSS si nevystačíš. Navíc tak jak to chceš to půjde jen v novějších prohlížečích.
2) Na stránce žádné menu není. A i kdyby tam bylo, nikde nemáš žádný javascript, který by ho obsluhoval. www.transformicons.com je jen k tvoření animovaných ikon, o žádnou obsluhu čehokoli jiného se nestará. To je na tobě. |
||
| hynek123456 Profil |
#3 · Zasláno: 17. 3. 2015, 11:14:52 · Upravil/a: hynek123456
Dobře, díky. Jde mi teď hlavně o to přejíždění těch stránek, můžeš mi prosím poslat nějaký odkaz (nejlépe česky, ale nakonec je to jedno) kde se to můžu naučit? Díky :)
A nebo, dalo by se to udělat vše na jedný stránce? Jestli jo tak by to potom šlo v CSS3 ne? |
||
| Bubák Profil |
#4 · Zasláno: 17. 3. 2015, 11:25:46
Koukni na http://jecas.cz/plynuly-prechod
Máš to česky a s autorem můžeš komunikovat i tady. |
||
| hynek123456 Profil |
#5 · Zasláno: 17. 3. 2015, 11:26:34
Bubák:
super, díky |
||
|
Časová prodleva: 9 let
|
|||
0