Oops! Sepertinya ada sedikit kesalahan ...

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..

Maunya mau pasang di bagian warna hitam atau merah gan
agak bingung nih :scratch:

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

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)|

: malah tambah bingung ane gan, coba kasih gambarnya aja ke sini

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..

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

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)

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

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

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

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 ?

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)

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?

Beginikah maksudnya

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>

Kayak di sini,ya?

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

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

@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..

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
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 }

Agan tommy kalau mau ganti jadi gambar gimana?

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

BUMP!

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.]

Pake ini ya kak

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

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

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

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

Maksudnya sprti yang di TNMAA ya?

mirip2... jadi kaya gini lo...

PICTURE:

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.

Kalo yg kayak gitu sakura ga tau : 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>