1. дома
  2. Вопрос и ответ
  3. мое падение вниз DIV не видно

мое падение вниз DIV не видно

2015-03-17 3 views
0

я хочу, чтобы сделать этот Div слайд вниз, нажав на название, но ДИВ идентификатор не виден, пожалуйста, помогитемое падение вниз DIV не видно

HTML файл

<div class="header"> 
     <img id="logo" src="images/mystore.png" height="40px"><span>My Store</span> 
     <input id="search_bar" value="search" type="text" ></input> 
     <span id="name">Hello Mr. <span class="admin_name"><?php echo "Mayur Sonawane";?></span></span> 
     <div class="drop_down"> 
      <a href="logout.php"><form method="post" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>"> 
       <input type="button" id="logout" name="logout" value="Logout"></form></a> 
      <script type="text/javascript"> 
    var flag=0; 
      $(document).ready(function() { 
       $(".drop_down").slideUp(); 
       $("#name").click(function(event) { 
        if (flag==0) { 
        $(".drop_down").slideDown('slow/400/fast', function() {flag=1;}); 
       }else 
        { 
         $(".drop_down").slideUp(); 
         flag=0; 
        } 
       }); 

      }); 
    </script> 
     </div> 


</div>

Css

body,html{ 
    margin: 0px; 
    height: 100%; 
    bottom: 0px; 
    background-color: #D6D6D6; 
    display: inline; 

} 
div.header { 
    background-color: grey; 
    height: 60px; 
    width: 100%; 
    position: fixed; 
    font-family: open-sans-semi; 
    font-size: 23px; 
    color: #0000FF; 
    text-shadow:1px 2px #00004C; 
} 

#search_bar { 
    display: inline; 
    float: right; 
    margin-right: 34%; 
    margin-top: 13px; 
    width: 350px; 
    height: 20px; 
    background: url(images/search-dark.png) no-repeat 10px 7px #444; 
    background-size: 15px 60%; 
    border: 0 none; 
    font: bold 12px Arial,Helvetica,Sans-serif; 
    color: #777; 
    padding: 6px 10px 6px 35px; 
    -webkit-border-radius: 20px; 
    -moz-border-radius: 20px; 
    border-radius: 20px; 
    text-shadow: 0 2px 2px rgba(0, 0, 0, 0.3); 
    -webkit-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    -moz-box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.1), 0 1px 3px rgba(0, 0, 0, 0.2) inset; 
    -webkit-transition: all 0.7s ease 0s; 
    -moz-transition: all 0.7s ease 0s; 
    -o-transition: all 0.7s ease 0s; 
    transition: all 0.7s ease 0s; 

} 
#logo { 
    margin:10px 0px 0px 20%; 
} 
#name{ 
    float:right; 
    margin-top: 0px; 
    margin-right: 20px; 
    color: white; 
    font-size: 20px; 
    font-family:open-sans-light,sans-serif; 
    margin-top: -50px; 
} 
#name:hover{ 
    cursor: pointer; 
} 
.drop_down{ 
    display: block; 
    float: right; 
    margin-top: 20px; 
    width:100px; 
    height: 50px; 
    margin-right: -190px; 
    background-color: grey; 
    box-shadow:0px 3px 2px 2px #001433; 
    padding: 10px; 
    border-radius: 50px 50px 10px 10px; 
    border:#4C1A80 2px solid; 
    position:relative; 
    } 
    #logout{ 
    width: 80px; 
    margin-left: 10px; 
    margin-right: auto; 
    margin-top: 30px; 
    background-color:#FFFF66; 
    font-family: open-sans-semi; 


}

источник

2015-03-17 Mayur

+1

для одного не располагайте JavaScript/JQuery внутри DIV вы хотите управлять, а поместить его в отдельном .js файле, или в ''

Смежные вопросы

 Смежные вопросы