Hãy đăng ký thành viên để có thể dễ dàng trao đổi, giao lưu và chia sẻ về kiến thức đồ họa.

  1. Hãy đăng ký subscribe kênh Youtube mới của Việt Designer tại địa chỉ: Youtube.com/VietDesignerChannel để theo dõi các video về thiết kế đồ họa. Do trước đó kênh cũ bị Youtube quét không rõ lý do, trong thời gian chờ kháng cáo nếu các bạn thấy video trên diễn đàn bị die không xem được thì có thể vào kênh mới để tìm xem video sơ cua nhé.
    Loại bỏ thông báo

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

Chủ đề thuộc danh mục 'Hỏi đáp - Thảo luận về web' được đăng bởi Trung thần thông, 6/8/12.

Lượt xem: 6,081

Trang 1 của 2

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

    Facebook Group Việt Designer
    Tham gia nhóm
    Facebook Fanpage Việt Designer
    Thích trang
    Trung thần thông, 6/8/12
    #1
  2. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    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!
    Phạm Hữu Dư, 6/8/12
    #2
  3. thanhluan

    thanhluan Thành viên cấp 4

    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 4

    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. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Phạm Hữu Dư, 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. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    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/
    Phạm Hữu Dư, 6/8/12
    #8
    Nguyễn Tất Thắng và Swiezwestside thích bài viết này.
  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. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Lạy ^:)^ nãy giờ mới chịu đưa ra link down js
    Phạm Hữu Dư, 6/8/12
    #10
    Swiezwestside thích bài viết này
  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. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    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
    Phạm Hữu Dư, 6/8/12
    #12
    Swiezwestside thích bài viết này
  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. Phạm Hữu Dư

    Phạm Hữu Dư phamhuudu.com Ban quản trị

    Đú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 :|
    Phạm Hữu Dư, 6/8/12
    #14
    Swiezwestside thích bài viết này
  15. thanhluan

    thanhluan Thành viên cấp 4

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

    banbaonylong Ko phải assmin

    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 Banned

    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 Ko phải assmin

    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 Banned

    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