Kalian Member Baru, Yuk Perkenalan Dahulu. 1 Member 1 Thread.
Selamat datang di Forum Atlanta~Halo, kalian masih menjadi tamu ya di forum ini ? Kenapa masih jadi tamu ayok ikutan kita gabung di forum ini.
Banyak loh tutorial yang dapat kamu dapatkan di sini, kalian juga bisa tanya-tanya tentang masalah blog/forum kok di sini.
Langsung aja yok daftar kalau kalian belum daftar di sini Register, Kalau sudah punya IDnya langsung aja ya Login

You are not connected. Please login or register

Pilih halaman : 1, 2  Next

 

slv Bagaimana Cara membuat Menu yang saat dihoiver keluar?

Oops! Sepertinya ada sedikit kesalahan ...

[#22124]

Atlanta telah memblok tamu untuk melihat konten yang ada, silahkan mendaftar untuk dapat melihat isi konten kami.


Need Help?

Message (Halaman 1 dari 2)

#1
 on 24/7/2013, 16:19

Retired Staff

avatar

Retired Staff
Saya ingin membuat emnu yang saat dihover keluar.. maksud saya menu ini akan dipasang di sebelah kanan tengah blog saya... setelah itu widget itu akan terus mengikuti saat kita scroll.. dan saat saya hover.. sudah keluar widget tersebut(gambar2 yang mengandung link menju page lain) bagaimana caranya?? kurang leibh seperti ini [You must be registered and logged in to see this link.] cuman yg saya mau pasang adalah gambar yang mengandung link ke page lain..

#2
 on 24/7/2013, 17:18

Owner of Atlanta

avatar

Owner of Atlanta
Maunya mau pasang di bagian warna hitam atau merah gan Senyum
agak bingung nih :scratch:

[You must be registered and logged in to see this image.]

#3
 on 24/7/2013, 17:56

Retired Staff

avatar

Retired Staff
Begini gan.. itu bukan hitam atau merah.. tapi 2 duanya.. soalnya gambar saya itu nyambung.. jadi pinggir gambar.. abis tu jadi gambar penuh.. (1| jadi (1-Contoh)|

Contoh nanti berupa link.. dan (=awal gambar )=akhir gambar |=garis pinggir dan semua itu berupa gambar Pada saat dihover keluar jadi ( 1-Contoh)|

#4
 on 24/7/2013, 18:25

Owner of Atlanta

avatar

Owner of Atlanta
mudeng: malah tambah bingung ane gan, coba kasih gambarnya aja ke sini Wink

#5
 on 24/7/2013, 19:21

Retired Staff

avatar

Retired Staff
Ini gan lihat [You must be registered and logged in to see this link.] Bagian "nongol" animasi ke 4 dari kiri atau 1 dari kanan jadi ganbar itu yg merah.. hijau itu garis pinggirnya..

#6
 on 24/7/2013, 19:36

Owner of Atlanta

avatar

Owner of Atlanta
maksudnya gambar yang merah itu blognya ?
maksudnya "di sebelah kanan tengah blog" itu di bagian mana ?

#7
 on 24/7/2013, 19:44

Retired Staff

avatar

Retired Staff
jadi misalnya di sebelah kanan.. abis tu tengah.. itu kira2 di atasnya gambar maskot atlanta sekarang ini.. jadi bukan paling atas tapi tengah.. dan setiap kita scroll tetep ngikuti.. dan buat blogger/wordpress lo ya.. (HTML Code)

#8
 on 24/7/2013, 20:00

Owner of Atlanta

avatar

Owner of Atlanta
maksudnya mengikuti begini [You must be registered and logged in to see this link.] :scratch:

#9
 on 25/7/2013, 07:29

Retired Staff

avatar

Retired Staff
Kak felix mau menjadikan itu sbg widget,ya?Kalo iya,widget apa? Senang

#10
 on 25/7/2013, 13:39

Retired Staff

avatar

Retired Staff
@Tommy bukan gan.. itu kan tulisannya yang ngikuti.. ini menunya gan.. jadi mirip kaya cahcepu itu gan..
@Sakurasou buat widget ke link2 penting..

#11
 on 25/7/2013, 18:46

Owner of Atlanta

avatar

Owner of Atlanta
FelixEdogawa wrote:@Tommy bukan gan.. itu kan tulisannya yang ngikuti.. ini menunya gan.. jadi mirip kaya cahcepu itu gan..
@Sakurasou buat widget ke link2 penting..

Jadi maunya sewaktu kita hover menu itu, baru menu itu ngikutin gitu ?

#12
 on 25/7/2013, 20:27

Retired Staff

avatar

Retired Staff
begini lo gan.. anggap aja itu widget selamat menuaikan ibadah puasa atlanta(kiri bawah).. nah pas kita hover ke sana itu keluar menunya.. jadi sebelumnya ga keluar semua.. tapi ngikutin ke mana aja.. tapi perbedaanya disini itu saya mau taro di sisi kiri bagian tengah.. (kurang lebih atasnya widget selamat menuakian ibadah puasa)

#13
 on 25/7/2013, 21:00

Retired Staff

avatar

Retired Staff
Jadi gini...

Widgetnya itu,awalnya tdk menampilkan apa2,waktu tdk di-hover.Ttp,sewaktu di-hover,keluar menu yg kak felix mau,gitu?trus,widgetnya itu pke efek melayang kyk widget bookmark di atlanta,gitu ya?

#14
 on 25/7/2013, 21:03

Owner of Atlanta

avatar

Owner of Atlanta
Beginikah maksudnya Senyum
Code:
<div class="nav">
<div class="see"></div>
<div class="hilang">
<ul>
<li><a href="#">Menu satu</a></li>
<li><a href="#">Menu dua</a></li>
<li><a href="#">Menu tiga</a></li>
<li><a href="#">Menu empat</a></li>
</ul>
</div>
</div>

<style>
.see{position:absolute;z-index:100;width:40px;height:100px;background:yellow;}
.hilang {
    position: relative;
    z-index: 99;
    width: 200px;
    height: auto;
    background: none repeat scroll 0% 0% red;
    opacity: 0;
    visibility: hidden;
    right: 100px;
    text-decoration: none;}
.nav:hover .hilang{transition:all 0.3s ease;right:-48px;opacity:1;visibility: visible;}
ul li{list-style:none;}
.hilang ul li a{
    display: block;
    text-decoration: none;
    color: white;
    font-weight: bold;
}
</style>

#15
 on 26/7/2013, 11:51

Retired Staff

avatar

Retired Staff
Kayak di sini,ya?

[You must be registered and logged in to see this link.]

Di situ ada widget namanya Menu....mau kayak gitu?

#16
 on 26/7/2013, 16:16

Retired Staff

avatar

Retired Staff
@Sakurasou betul kaya gitu!!

oh ya gan tommy kalau designya mau diubah.. kode mana yg harus diubah?? dan oh ya.. itu dipasangnya posisinya tetap dilayar.. jadi kita scroll manapun tetp ikut..

#17
 on 26/7/2013, 19:37

Owner of Atlanta

avatar

Owner of Atlanta
FelixEdogawa wrote:@Sakurasou betul kaya gitu!!

oh ya gan tommy kalau designya mau diubah.. kode mana yg harus diubah?? dan oh ya.. itu dipasangnya posisinya tetap dilayar.. jadi kita scroll manapun tetp ikut..

sorry gan ane lupa wek
nih coba kode ini
Code:
        <div class="nav">
        <div class="see"></div>
        <div class="hilang">
        <ul>
        <li><a href="#">Menu satu</a></li>
        <li><a href="#">Menu dua</a></li>
        <li><a href="#">Menu tiga</a></li>
        <li><a href="#">Menu empat</a></li>
        </ul>
        </div>
        </div>
        <style>
.nav{position:fixed;top:100px;}
        .see{position:absolute;z-index:100;width:40px;height:100px;background:yellow;}
        .hilang {
            position: relative;
            z-index: 99;
            width: 200px;
            height: auto;
            background: none repeat scroll 0% 0% red;
            opacity: 0;
            visibility: hidden;
            right: 100px;
            text-decoration: none;}
        .nav:hover .hilang{transition:all 0.3s ease;right:-48px;opacity:1;visibility: visible;}
        ul li{list-style:none;}
        .hilang ul li a{
            display: block;
            text-decoration: none;
            color: white;
            font-weight: bold;
        }
        </style>

nah kalo untuk ngeditnya bisa di bagian
Code:
<div class="hilang">
        <ul>
        <li><a href="#">Menu satu</a></li>
        <li><a href="#">Menu dua</a></li>
        <li><a href="#">Menu tiga</a></li>
        <li><a href="#">Menu empat</a></li>
        </ul>
        </div>

atau di cssnya

.hilang{ design css disini }
Wink

#18
 on 26/7/2013, 20:26

Retired Staff

avatar

Retired Staff
Agan tommy kalau mau ganti jadi gambar gimana?

Sorry gan untuk sebelah kiri eror ga bisa.. jadi mungkin utk sebelah kanan bisa?

#19
 on 27/7/2013, 08:10

Retired Staff

avatar

Retired Staff
BUMP!

#20
 on 28/7/2013, 09:02

Owner of Atlanta

avatar

Owner of Atlanta
Yang gini aja gan ?
Code:
<div class="slide-main">
  <div class="AT"></div>
  <div class="slide-container">
  paste your main content code here
  </div>
</div>
<style>
.AT{background-color:red;width:30px;height:80px;}
.slide-main {
  position: fixed;
 top: 50px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-container {
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#dcdcdc;
  position: fixed;
 top: 50px;
  right: -270px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-main:hover {
right:270px;
}
.slide-main:hover .slide-container{
  right: 0;
}</style>

[You must be registered and logged in to see this link.]

#21
 on 28/7/2013, 11:17

Retired Staff

avatar

Retired Staff
Pake ini ya kak Wink

Code:
<style>
.slide-main {
  position: fixed;
 top: 50px;
  right: 0;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-container {
  height:270px;
  width:266px;
  border:2px solid #444444;
  border-radius:5px;
    -moz-border-radius:5px;
    -webkit-border-radius:5px;
  background:#dcdcdc;
  position: fixed;
 top: 50px;
  right: -270px;
  -webkit-transition-duration: 1s;
  -moz-transition-duration: 1s;
  -o-transition-duration: 1s;
  transition-duration: 1s;
}
.slide-main:hover {
right:270px;
}
.slide-main:hover .slide-container{
  right: 0;
}</style>
<div class="slide-main">
  <img src="slide.png" />
  <div class="slide-container">
  <a href="#">Menu 1</a>
<a href="#">Menu 2</a>
<a href="#">Menu 3</a>
<a href="#">Menu 4</a>
  </div>
</div>

Sakura cma dapet itu aja stlah meng-search di google Wink

Copyright

#22
 on 28/7/2013, 11:36

Retired Staff

avatar

Retired Staff
kalau pas dihover keluarnya sambungan gambar bisa tidak?? jadi bukan kotak gitu..

#23
 on 28/7/2013, 11:50

Retired Staff

avatar

Retired Staff
FelixEdogawa wrote:kalau pas dihover keluarnya sambungan gambar bisa tidak?? jadi bukan kotak gitu..

Maksudnya sprti yang di TNMAA ya?

#24
 on 28/7/2013, 12:03

Retired Staff

avatar

Retired Staff
mirip2... jadi kaya gini lo...

PICTURE:
[You must be registered and logged in to see this image.]

cuman aku mau buatnya kurangl eibh 5 gitu.. jadi home, contact us, etc. dan ke bawah terus

Gambar 1|MENU
Gambar 2|MENU
Gmabar 3|MENU
dst.

#25
 on 28/7/2013, 12:12

Retired Staff

avatar

Retired Staff
Kalo yg kayak gitu sakura ga tau lol!: tpi kalo nambah link linknya sakura tau aja kok

tinggal ditambah kode
Code:
<a href="#">Menu 5</a>
di bawah kode
Code:
<a href="#">Menu 4</a>

Sponsored content
#26
 


Message (Halaman 1 dari 2)

Share This Topic !

URL :
BBcode :
HTML :

Pilih halaman : 1, 2  Next

Permissions in this forum:
Anda tidak dapat menjawab topik

Total Posts Total Threads Total Members Newest Member29 November 2014 Date of Establishment of the Forum

Total 0 user online :: 0 Terdaftar, 0 Tersembunyi dan 0 Tamu

Total 0 user online :: 0 Terdaftar, 0 Tersembunyi dan 0 Tamu (Lihat list online)


User yang sedang berada di forum ini: Tidak ada