Làm hiệu ứng dropdown login như mediafire

Chủ đề thuộc danh mục 'HTML - CSS - JS - PHP' được đăng bởi Trung thần thông, 6/8/12.

Trang 1 của 2
  1. Trung thần thông

    Trung thần thông Mới đăng kí

    Mình làm cái dropdwon login gần giống mediafire nhưng gặp tí vấn đề là ở chổ khi show ra được cái form nhưng mình muốn là cái màu của form nó cũng bao luôn cái phần chứa chử đăng nhập như mediafire . Khi mình click vào login trong mediafire thì thấy show form ra mà màu của form login cũng bao luôn chữ login và ta có cảm giác như form login và chử login nối liền với nhau. Cái này bạn nào biết xin giúp.

    Đâu là source code của mình :


    HTML:
    <html>
 
<head>
 
<title>mediafire login </title>
 
<style type="text/css">
 
*{margin:0;padding:0;}
 
 
 
#banner
 
{
 
width:100%;
 
height:50px;
 
background:rgb(20,49,70);
 
font-family:Verdana, Arial, Helvetica, sans-serif;
 
}
 
 
 
#banner_form
 
{
 
float:right;
 
width:260px;
 
height:48px;
 
}
 
 
 
ul
 
{
 
border:1px solid rgba(244,211,233,.2);
 
border-radius:5px;
 
background:rgb(62,159,240);
 
margin:7px;
 
width:210px;
 
height:auto;
 
padding:7px;
 
}
 
 
 
ul li
 
{
 
display:inline;
 
list-style:none;
 
padding-left:18px;
 
}
 
 
 
a
 
{
 
text-decoration:none;
 
font-size:16px;
 
color:rgba(244,233,222,0.9);
 
cursorointer;
 
}
 
 
 
#form_login
 
{
 
width:280px;
 
height:auto;
 
background:rgba(239,242,274,1);
 
border:1px solid rgba(251,241,231,.7);
 
border-radius:5px;
 
margin:-6px -50px;
 
overflow:hidden;
 
display:none;
 
}
 
 
 
fieldset
 
{
 
margin-top:8px;
 
padding:14px 0 0 20px;
 
border:none;
 
}
 
 
 
input
 
{
 
width:240px;
 
box-shadow:1px 1px 5px rgba(0,0,0,0.07) inset;
 
height:30px;
 
border-radius:5px;
 
border:1px solid rgba(0,0,0,.3);
 
padding-left:5px;
 
font-size:14px;
 
}
 
 
 
fieldset label
 
{
 
font-size:14px;
 
color:rgba(111,97,170,.8);
 
padding-bottom:6px;
 
display:block;
 
}
 
 
 
fieldset a
 
{
 
font-size:11px;
 
text-decoration:none;
 
color:#9F2D34;
 
display:block;
 
padding:5px 0 0 6px;;
 
}
 
 
 
input[type="checkbox"]
 
{
 
margin-left:-92px;
 
margin-top:16px;
 
}
 
 
 
p
 
{
 
font-size:11px;
 
margin:-22px 0 0 40px;
 
display:block;
 
}
 
 
 
input[type="submit"]
 
{
 
margin:14px 0 14px 20px;
 
font-weight:bold;
 
background:rgba(56,87,107,.9);
 
color:white;
 
height:34px;
 
}
 
 
 
</style>
 
 
 
 
 
<script src="jquery-1.7.2.min.js" type="text/javascript"></script>
 
<script type="text/javascript">
 
$(function(){
 
$('#dangnhap').click(function(){
 
$('#form_login').css({'display':'block'});
 
})
 
 
 
$('img').click(function(){
 
$('#form_login').css({'display':'none'});
 
});
 
 
 
});
 
</script>
 
</head>
 
<body>
 
<div id="banner">
 
<div id="banner_form">
 
<ul>
 
<li><a id="dangky">Đăng ký</a></li>
 
<li><a id="dangnhap">Đăng nhập </a></li>
 
</ul>
 
<div id="form_login">
 
<img src="close.png" style="margin-right:10px;margin-top:10px;float:right;cursorointer"/>
 
<fieldset>
 
<label>Email đăng nhập/label>
 
<input type="text" />
 
</fieldset>
 
<fieldset>
 
<label>Mật khẩu/label>
 
<input type="password" />
 
<a href="#">Quên mật khẩu</a>
 
</fieldset>
 
<input type="checkbox" /><p>Ghi nhớ tài khoãn</p>
 
 
 
<input type="submit" value="Đăng nhập"/>
 
</div> <!-- end form_login -->
 
</div><!-- banner_form end -->
 
</div> <!-- end banner -->
 
</body>
 
</html>
     

    Xem thêm các chủ đề cùng chuyên mục

    Trung thần thông, 6/8/12
    #1
  2. Việt Nét

    Việt Nét Administrator Staff Member

    Lần sau nên chèn code vào thẻ code nhé bạn! Và tiêu đề thì nên viết hoa chữ cái đầu tiên :)

    Đã edit dùm bạn!
     
    Việt Nét, 6/8/12
    #2
  3. thanhluan

    thanhluan Thành viên cấp 2

    bạn nên đưa chút hình ảnh demo cho dễ hình dung
     
    thanhluan, 6/8/12
    #3
  4. Trung thần thông

    Trung thần thông Mới đăng kí

    Thì bạn cứ copy code về chạy thử sẽ biết thôi. Và nhớ vào trang jquery.com lấy file jquery về mới chạy được. Thì ý mình là khi mình click vào chử login thì hiện form login như mediafire và màu của form login cùng màu bao trùm chử login. Còn chèn hình demo ra sao mình không biết, xin hướng dẫn. Tìm hoài không biết cách lấy hình từ máy tính dán lên cho các bạn xem.
     
    Trung thần thông, 6/8/12
    #4
  5. thanhluan

    thanhluan Thành viên cấp 2

    bạn có thể chụp ảnh màn hình lại mà -> nút "prtsystq" sau đó paste vào paint...chứ bạn nói như thế rất khó hình dung, mọi ng cũng ngại down code về chạy nữa...
     
    thanhluan, 6/8/12
    #5
  6. Việt Nét

    Việt Nét Administrator Staff Member

    Việt Nét, 6/8/12
    #6
  7. Trung thần thông

    Trung thần thông Mới đăng kí

    nút "prtsystq" nằm ở đâu vậy bạn. Mình thấy biểu tượng chèn hình thì nó đòi url trong khi mình cần chèn hình minh họa lấy từ máy tính.
     
    Trung thần thông, 6/8/12
    #7
  8. Việt Nét

    Việt Nét Administrator Staff Member

    Bạn đang tập tành làm web mà ngay cả nguyên lý up ảnh trên diễn đàn cũng ko biết àh? Chưa sử dụng forum bao giờ hả :| Nhét link ảnh vào thẻ IMG thì sẽ hiện ra ảnh thôi, vào đây tham khảo dùm bài này cái: http://forum.vietdesigner.net/threa...anh-tranh-loi-hien-thi-anh-tren-dien-dan.431/
     
    Việt Nét, 6/8/12
    #8
  9. Trung thần thông

    Trung thần thông Mới đăng kí

    thì bời không không có file jquery thì lấy gì chạy. tải file jquery-1.7.2.min.js dính kèm vô thì mới chạy được. Đây là source và hình mình họa muốn đạt được hiệu ứng : http://www.mediafire.com/?nnsk3hplyw1ne83
     
    Trung thần thông, 6/8/12
    #9
  10. Việt Nét

    Việt Nét Administrator Staff Member

    Lạy ^:)^ nãy giờ mới chịu đưa ra link down js
     
    Việt Nét, 6/8/12
    #10
  11. Trung thần thông

    Trung thần thông Mới đăng kí

    Hướng dãn úp hình cũng lấy link trên mạng chứ có lấy đường dẫn tư máy tính đâu.
     
    Trung thần thông, 6/8/12
    #11
  12. Việt Nét

    Việt Nét Administrator Staff Member

    Thôi nói chuyện vs bạn hại não thật! Có mỗi vấn đề up ảnh trên diễn đàn mà nãy giờ nói mãi bạn ko hiểu thì nói gì đến mấy vụ jquery này :-j
     
    Việt Nét, 6/8/12
    #12
  13. Trung thần thông

    Trung thần thông Mới đăng kí

    tại trang này không hổ trợ úp hình từ máy tính chứ. Đây là thiếu sót chưa hổ trợ đầy đủ cho người dùng. Jquery thì thì cũng tạm tạm thôi còn phải học nhiều.
     
    Trung thần thông, 6/8/12
    #13
  14. Việt Nét

    Việt Nét Administrator Staff Member

    Đúng là có chức năng up ảnh từ máy tính nhưng đó chỉ là để up avatar, còn các file ảnh thì tôi đã tắt đi chức năng này vì để tránh hao tốn tài nguyên! Nhưng đa số diễn đàn lớn hiện nay như vozforums, truongton.net hay vn-zoom làm gì có chức năng up ảnh từ máy tính? Tất cả đều phải up lên host ảnh và lấy link up vào diễn đàn, hoặc lấy sẵn từ ảnh ở đâu đó!

    Nếu những member gà IT thì tôi ko nói, nhưng ở trường hợp bạn cũng là 1 người chuyên tìm tòi học hỏi về tkế web mà những điều cơ bản như thế bạn cũng ko biết thì tôi cảm thấy thật sự ngỡ ngàng :|
     
    Việt Nét, 6/8/12
    #14
  15. thanhluan

    thanhluan Thành viên cấp 2

    ad thông cảm, có thể bạn ấy mới học nên ko rõ
     
    thanhluan, 6/8/12
    #15
  16. banbaonylong

    banbaonylong Thành viên cấp 2 Staff Member

    thế sao bạn ko up ảnh lên host rồi wăng lên đây?
    còn việc bạn nói thì bạn chỉnh trong phần css nhé ;)
     
    banbaonylong, 6/8/12
    #16
  17. Trung thần thông

    Trung thần thông Mới đăng kí

    thế câu hỏi của mình giải đáp thế nào các bạn. Chỉnh sửa những gì cho mình biết cụ thể nói chung chung quá chưa rõ chỉnh gì.
     
    Trung thần thông, 6/8/12
    #17
  18. pitlamgi

    pitlamgi Thành viên cấp 2

    Mình có ý kiến thế này :)

    Bạn vào mediafire rồi ấn ctrl + U rồi tìm đoạn mã nguồn đó :D mình cũng tìm cùng bạn. Nếu được mình sẽ post lên đây:D

    CÁch khác là vào các wed Java để hỏi. Tổng hợp nhiều nguồn là ra ý mà :D
     
    pitlamgi, 6/8/12
    #18
  19. banbaonylong

    banbaonylong Thành viên cấp 2 Staff Member

    bạn post full folder gồm container (img, js, css) và html thì mình còn xem và chỉnh đc

    mình ko hơi đâu paste cái mớ này vào để chỉnh, tốn thời gian
     
    banbaonylong, 6/8/12
    #19
    pitlamgi thích bài viết này
  20. pitlamgi

    pitlamgi Thành viên cấp 2

    chính xác đó bạn :D

    Bạn chủ thớt post 1 folder đầy đủ lên đây xem nào?:-"

    Nén vào rồi cho lên mediafire rồi up link lên đây :-bd
     
    pitlamgi, 6/8/12
    #20
Trang 1 của 2

Ủng hộ diễn đàn