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

 

Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini?

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

#1
 on 11/3/2014, 09:27

Level 5

Level 5
Oh Ya Gan Saya Mau Tanya Nih Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Gimana Yah?

Screan Shoot Nya:
[You must be registered and logged in to see this image.]

Kalo Ada Yang Tau Tolong Di Share Ya Tutorial Nya Senyum

#2
 on 13/3/2014, 00:11

Owner of Atlanta


Owner of Atlanta
Gini mau gak gan ?
[You must be registered and logged in to see this image.]
kalo yang sama kayak forum ini saya belum bisa share,

HTML
Code:
<div class="dropdown">
    <input class="dropdown-toggle" type="text">
    <div class="dropdown-text">Account</div>
    <ul class="dropdown-content">
      <li><a href="#">Settings</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>

css
Code:
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text::-moz-selection,
.dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
.dropdown-text::selection,
.dropdown-toggle::selection { background: transparent; color: inherit; }

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: .25s ease;
  -moz-transition: .25s ease;
  -ms-transition: .25s ease;
  -o-transition: .25s ease;
  transition: .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  border-color: #c5c5c5;
  box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

#3
 on 13/3/2014, 12:22

Level 5

Level 5
[You must be registered and logged in to see this link.] wrote:Gini mau gak gan ?
[You must be registered and logged in to see this image.]
kalo yang sama kayak forum ini saya belum bisa share,

HTML
Code:
<div class="dropdown">
    <input class="dropdown-toggle" type="text">
    <div class="dropdown-text">Account</div>
    <ul class="dropdown-content">
      <li><a href="#">Settings</a></li>
      <li><a href="#">Projects</a></li>
      <li><a href="#">Log out</a></li>
    </ul>
  </div>

css
Code:
.dropdown {
  position: relative;
  display: inline-block;
  text-align: left;
  width: 132px;
}

.dropdown-text::-moz-selection,
.dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
.dropdown-text::selection,
.dropdown-toggle::selection { background: transparent; color: inherit; }

.dropdown-text {
  cursor: pointer;
  position: absolute;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  border-radius: 3px;
  box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
  width: 100%;
}

.dropdown-text:after {
  position: absolute;
  right: 6px;
  top: 15px;
  content: '';
  width: 0px;
  height: 0px;
  border-style: solid;
  border-width: 5px 4px 0 4px;
  border-color: #555 transparent transparent transparent;
}

.dropdown-text,
.dropdown-content a {
  color: #333;
  text-shadow: 0 1px #fff;
}

.dropdown-toggle {
  font-size: 0;
  z-index: 1;
  cursor: pointer;
  position: absolute;
  top: 0;
  border: none;
  padding: 0;
  margin: 0 0 0 1px;
  background: transparent;
  text-indent: -10px;
  height: 34px;
  width: 100%;
}

.dropdown-toggle:focus {
  outline: 0;
}

.dropdown-content {
  -webkit-transition: .25s ease;
  -moz-transition: .25s ease;
  -ms-transition: .25s ease;
  -o-transition: .25s ease;
  transition: .25s ease;
  list-style-type: none;
  position: absolute;
  top: 32px;
  padding: 0;
  margin: 0;
  opacity: 0;
  visibility:hidden;
  border-radius: 3px;
  text-indent: 10px;
  line-height: 32px;
  background-color: #eee;
  border: 1px solid #ccc;
  width: 140px;
}

.dropdown-content a {
  display: block;
}

.dropdown-content a:hover {
  background: #e8e8e8;
}


.dropdown-toggle:hover ~ .dropdown-text,
.dropdown-toggle:focus ~ .dropdown-text {
  background-color: #e8e8e8;
}

.dropdown-toggle:focus ~ .dropdown-text {
  border-color: #c5c5c5;
  box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
  z-index: 2;
}

.dropdown-toggle:focus ~ .dropdown-text:after {
  border-width: 0 4px 5px 4px;
  border-color: transparent transparent #555 transparent;
}

.dropdown-content:hover,
.dropdown-toggle:focus ~ .dropdown-content {
  opacity: 1;
  visibility:visible;
  top: 42px;
}

Cara Pasang Nye Gimane?

#4
 on 14/3/2014, 05:21

Owner of Atlanta


Owner of Atlanta
code di bawah ini di letakki dimana aja, di overal header bisa kok Wink
Code:
    <div class="dropdown">
        <input class="dropdown-toggle" type="text">
        <div class="dropdown-text">Account</div>
        <ul class="dropdown-content">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Log out</a></li>
        </ul>
      </div>

terus ini CSSnya (admin > display > color > css stylesheet)
Code:
    .dropdown {
      position: relative;
      display: inline-block;
      text-align: left;
      width: 132px;
    }

    .dropdown-text::-moz-selection,
    .dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
    .dropdown-text::selection,
    .dropdown-toggle::selection { background: transparent; color: inherit; }

    .dropdown-text {
      cursor: pointer;
      position: absolute;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
      width: 100%;
    }

    .dropdown-text:after {
      position: absolute;
      right: 6px;
      top: 15px;
      content: '';
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      border-color: #555 transparent transparent transparent;
    }

    .dropdown-text,
    .dropdown-content a {
      color: #333;
      text-shadow: 0 1px #fff;
    }

    .dropdown-toggle {
      font-size: 0;
      z-index: 1;
      cursor: pointer;
      position: absolute;
      top: 0;
      border: none;
      padding: 0;
      margin: 0 0 0 1px;
      background: transparent;
      text-indent: -10px;
      height: 34px;
      width: 100%;
    }

    .dropdown-toggle:focus {
      outline: 0;
    }

    .dropdown-content {
      -webkit-transition: .25s ease;
      -moz-transition: .25s ease;
      -ms-transition: .25s ease;
      -o-transition: .25s ease;
      transition: .25s ease;
      list-style-type: none;
      position: absolute;
      top: 32px;
      padding: 0;
      margin: 0;
      opacity: 0;
      visibility:hidden;
      border-radius: 3px;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      width: 140px;
    }

    .dropdown-content a {
      display: block;
    }

    .dropdown-content a:hover {
      background: #e8e8e8;
    }


    .dropdown-toggle:hover ~ .dropdown-text,
    .dropdown-toggle:focus ~ .dropdown-text {
      background-color: #e8e8e8;
    }

    .dropdown-toggle:focus ~ .dropdown-text {
      border-color: #c5c5c5;
      box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
      z-index: 2;
    }

    .dropdown-toggle:focus ~ .dropdown-text:after {
      border-width: 0 4px 5px 4px;
      border-color: transparent transparent #555 transparent;
    }

    .dropdown-content:hover,
    .dropdown-toggle:focus ~ .dropdown-content {
      opacity: 1;
      visibility:visible;
      top: 42px;
    }

#5
 on 14/3/2014, 10:39

Level 5

Level 5
[You must be registered and logged in to see this link.] wrote:code di bawah ini di letakki dimana aja, di overal header bisa kok Wink
Code:
    <div class="dropdown">
        <input class="dropdown-toggle" type="text">
        <div class="dropdown-text">Account</div>
        <ul class="dropdown-content">
          <li><a href="#">Settings</a></li>
          <li><a href="#">Projects</a></li>
          <li><a href="#">Log out</a></li>
        </ul>
      </div>

terus ini CSSnya (admin > display > color > css stylesheet)
Code:
    .dropdown {
      position: relative;
      display: inline-block;
      text-align: left;
      width: 132px;
    }

    .dropdown-text::-moz-selection,
    .dropdown-toggle::-moz-selection { background: transparent; color: inherit; }
    .dropdown-text::selection,
    .dropdown-toggle::selection { background: transparent; color: inherit; }

    .dropdown-text {
      cursor: pointer;
      position: absolute;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      border-radius: 3px;
      box-shadow: 0 1px 0 rgba(255,255,255, .9) inset, 0 1px 3px rgba(0,0,0, .1);
      width: 100%;
    }

    .dropdown-text:after {
      position: absolute;
      right: 6px;
      top: 15px;
      content: '';
      width: 0px;
      height: 0px;
      border-style: solid;
      border-width: 5px 4px 0 4px;
      border-color: #555 transparent transparent transparent;
    }

    .dropdown-text,
    .dropdown-content a {
      color: #333;
      text-shadow: 0 1px #fff;
    }

    .dropdown-toggle {
      font-size: 0;
      z-index: 1;
      cursor: pointer;
      position: absolute;
      top: 0;
      border: none;
      padding: 0;
      margin: 0 0 0 1px;
      background: transparent;
      text-indent: -10px;
      height: 34px;
      width: 100%;
    }

    .dropdown-toggle:focus {
      outline: 0;
    }

    .dropdown-content {
      -webkit-transition: .25s ease;
      -moz-transition: .25s ease;
      -ms-transition: .25s ease;
      -o-transition: .25s ease;
      transition: .25s ease;
      list-style-type: none;
      position: absolute;
      top: 32px;
      padding: 0;
      margin: 0;
      opacity: 0;
      visibility:hidden;
      border-radius: 3px;
      text-indent: 10px;
      line-height: 32px;
      background-color: #eee;
      border: 1px solid #ccc;
      width: 140px;
    }

    .dropdown-content a {
      display: block;
    }

    .dropdown-content a:hover {
      background: #e8e8e8;
    }


    .dropdown-toggle:hover ~ .dropdown-text,
    .dropdown-toggle:focus ~ .dropdown-text {
      background-color: #e8e8e8;
    }

    .dropdown-toggle:focus ~ .dropdown-text {
      border-color: #c5c5c5;
      box-shadow: 0 1px 3px rgba(0,0,0, .15) inset, 0 1px 0 rgba(255,255,255, 0.8);
      z-index: 2;
    }

    .dropdown-toggle:focus ~ .dropdown-text:after {
      border-width: 0 4px 5px 4px;
      border-color: transparent transparent #555 transparent;
    }

    .dropdown-content:hover,
    .dropdown-toggle:focus ~ .dropdown-content {
      opacity: 1;
      visibility:visible;
      top: 42px;
    }

Mana Gan Engga Work -,-

#6
 on 14/3/2014, 14:26

Level 0

work om, kode html nya masukin di widget aja

Unggah File Indonesia

#7
 on 14/3/2014, 15:17

Level 5

Level 5
[You must be registered and logged in to see this link.] wrote:work om, kode html nya masukin di widget aja

Unggah File Indonesia

mana gue udh daftar di forum loe tapi engga drop down menu -,-

#8
 on 14/3/2014, 19:12

Owner of Atlanta


Owner of Atlanta
[You must be registered and logged in to see this link.] wrote:
[You must be registered and logged in to see this link.] wrote:work om, kode html nya masukin di widget aja

Unggah File Indonesia

mana gue udh daftar di forum loe tapi engga drop down menu -,-

lihat di widget sebelah kanan forumnya gan

#9
 on 15/3/2014, 11:05

Level 5

Level 5
[You must be registered and logged in to see this link.] wrote:
[You must be registered and logged in to see this link.] wrote:
[You must be registered and logged in to see this link.] wrote:work om, kode html nya masukin di widget aja

Unggah File Indonesia

mana gue udh daftar di forum loe tapi engga drop down menu -,-

lihat di widget sebelah kanan forumnya gan

tapi ane mau nye kaya forum ini gan tommy :/

#10
 on 16/3/2014, 01:42

Owner of Atlanta


Owner of Atlanta
Nih coba letakkin dimana aja
Code:
<a id="proA" href="#" style="padding: 12px 12px 7px !important;"><span class="fa_atlanta"></span> <span class="USERNAME"></span> ▼</a>
<div class="proB" style="display:none;">
<div class="proC">
<ul style="border-right: 2px solid grey; box-shadow: 0px 0px 5px grey; width: 40%;">
<li><a href="/profile.forum?mode=editprofile">Informasi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">Mengelola Preffensi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=signature">Ganti Signature</a></li>
<li><a href="/profile?mode=editprofile&page_profil=avatars">Ganti Avatar</a></li>
</ul>
<ul style="box-shadow: 0px 0px 5px grey; width: 59%;">
<li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Permintaan Pertemanan</a></li>
<li><a href="/search?search_id=watchsearch">Topik Yang Kamu Lihat</a></li>
<li><a href="/search?search_id=egosearch">Postingan Kamu</a></li>
<li><a href="/search?search_id=unanswered">Postingan Yang Belum Di Jawab</a></li>
</ul>
<div class="copyrightP">Copyright Profile User By Atlanta Forum</div>
</div>
</div>
<script>
$("#proA").click(function() {
$(".proB").fadeToggle("fast");
});
</script>

CSS
Code:
.proC {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) grey;
    border-image: none;
    border-radius: 0px 5px 5px 5px;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    padding: 5px;
    position: absolute;
    width: 400px;
    z-index: 999;
    margin-top: -13px;
    margin-left: -1px;
}
.proC ul {
    float: left;
    background: none repeat scroll 0% 0% white;
}
.proC ul li {padding:5px;list-style:none !important;}
.proC ul li:hover{background-color:grey;color:white !important;}
.proC ul li a {
    display: block;
    font-weight: 700;
    color: black !important;
    text-decoration: none;
}

#11
 on 16/3/2014, 12:24

Level 5

Level 5
[You must be registered and logged in to see this link.] wrote:Nih coba letakkin dimana aja
Code:
<a id="proA" href="#" style="padding: 12px 12px 7px !important;"><span class="fa_atlanta"></span> <span class="USERNAME"></span> ▼</a>
<div class="proB" style="display:none;">
<div class="proC">
<ul style="border-right: 2px solid grey; box-shadow: 0px 0px 5px grey; width: 40%;">
<li><a href="/profile.forum?mode=editprofile">Informasi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=preferences">Mengelola Preffensi</a></li>
<li><a href="/profile?mode=editprofile&page_profil=signature">Ganti Signature</a></li>
<li><a href="/profile?mode=editprofile&page_profil=avatars">Ganti Avatar</a></li>
</ul>
<ul style="box-shadow: 0px 0px 5px grey; width: 59%;">
<li><a href="/profile?mode=editprofile&page_profil=friendsfoes">Permintaan Pertemanan</a></li>
<li><a href="/search?search_id=watchsearch">Topik Yang Kamu Lihat</a></li>
<li><a href="/search?search_id=egosearch">Postingan Kamu</a></li>
<li><a href="/search?search_id=unanswered">Postingan Yang Belum Di Jawab</a></li>
</ul>
<div class="copyrightP">Copyright Profile User By Atlanta Forum</div>
</div>
</div>
<script>
$("#proA").click(function() {
$(".proB").fadeToggle("fast");
});
</script>

CSS
Code:
.proC {
    -moz-border-bottom-colors: none;
    -moz-border-left-colors: none;
    -moz-border-right-colors: none;
    -moz-border-top-colors: none;
    background: none repeat scroll 0px 0px rgba(0, 0, 0, 0.6);
    border-color: rgba(0, 0, 0, 0.35) rgba(0, 0, 0, 0.35) grey;
    border-image: none;
    border-radius: 0px 5px 5px 5px;
    border-style: solid;
    border-width: 1px 1px 2px;
    box-shadow: 0px 0px 2px rgb(0, 0, 0);
    padding: 5px;
    position: absolute;
    width: 400px;
    z-index: 999;
    margin-top: -13px;
    margin-left: -1px;
}
.proC ul {
    float: left;
    background: none repeat scroll 0% 0% white;
}
.proC ul li {padding:5px;list-style:none !important;}
.proC ul li:hover{background-color:grey;color:white !important;}
.proC ul li a {
    display: block;
    font-weight: 700;
    color: black !important;
    text-decoration: none;
}

Terima Kasih Gan Worked !

#12
 on 16/3/2014, 22:01

Owner of Atlanta


Owner of Atlanta
[You must be registered and logged in to see this image.] Terima kasih topik anda sudah solved.
Jika masih butuh bantuan silahkan buat thread baru lagi.


Topic Locked & Archives!



Atlanta forum help support yeah

Sponsored content
#13
 Today at 07:47


Message (Halaman 1 dari 1)

Share This Topic !

URL :
BBcode :
HTML :

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