Yuk DAFTAR SEKARANG juga, banyak TUTORIAL MENARIK buat kalian para forumer @2018
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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 11/3/2014, 09:27

Level 5
-Developer K-

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 13/3/2014, 00:11

Owner of Atlanta

tommycoo

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 13/3/2014, 12:22

Level 5
-Developer K-

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 14/3/2014, 05:21

Owner of Atlanta

tommycoo

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 14/3/2014, 10:39

Level 5
-Developer K-

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 14/3/2014, 14:26

Level 0
metalman

work om, kode html nya masukin di widget aja

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

#7
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 14/3/2014, 15:17

Level 5
-Developer K-

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

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

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

#8
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 14/3/2014, 19:12

Owner of Atlanta

tommycoo

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

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

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

lihat di widget sebelah kanan forumnya gan

#9
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 15/3/2014, 11:05

Level 5
-Developer K-

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

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

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 16/3/2014, 01:42

Owner of Atlanta

tommycoo

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 16/3/2014, 12:24

Level 5
-Developer K-

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty on 16/3/2014, 22:01

Owner of Atlanta

tommycoo

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
Solved: Cara Membuat Profile User Drop Down Menu Seperti Forum Ini? Empty 


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