드롭 다운 메뉴의 contactform

나는 dropdownmenu에서 contactform을 사용하려고했습니다. 지금까지는 메뉴에서 사용할 수있게 좋았지 만이 연락처 양식에는 아무 것도 쓸 수 없습니다.드롭 다운 메뉴의 contactform

메뉴는 모든 시간을 닫습니다. display:block으로 시도했지만 작동하지 않습니다. 이 문제를 해결하려면 어떻게해야합니까? 솔루션?

<a data-toggle="dropdown" tabindex="1" class="dropdown-toggle" href="#"> 
    Kontakt <b class="caret"></b> 
</a>

과이있다 : 당신은 당신이 바닥을 열려면 클릭하는 링크에 약간 변경해야

  <li class="dropdown"> 
       <a data-toggle="dropdown" class="dropdown-toggle" href="index.html">Kontakt <b class="caret"></b></a> 
       <ul class="dropdown-menu"> 
       <li class="nav-header">Kontaktiere mich</li> 
        <li class="contactform"> 
         <section> 
          <form method="post" action="/" class="contactbox"> 
           <div class="contactbox"> 
            <p><label>Dein Anliegen:</label><br> 
            <textarea class="input-xsmall" id="textarea" rows="3"></textarea> 

            <p><label>Dein Name:</label><br> 
            <input type="text" required=""></p> 

            <p><label>Deine E-Mail-Adresse:</label><br> 
            <input type="email" required="" value=""></p> 

            <button class="btn" type="submit">absenden</button> 
           </div> 
          </form> 
         </section> 
        </li> 
       </ul> 
      </li>

출처

2012-05-26 hazelnut

나는이 CSS로 완전히 수행 할 수 있습니다 확실하지 않다. 그것은 [내가 도울 수있는이 문제] (http://stackoverflow.com/questions/10044403/show-div-while-input-is-selected-using-css-without-javascipt/10044553#10044553)와 비슷한 점이 있습니다. 그러나 다른 복잡한 요인들과 함께. 우리는 당신의 css 코드를보고 또한 [jsfiddle.net] (http://jsfiddle.net/) 테스트 케이스를 설정하여 솔루션을 제공하는 것이 이상적입니다. – ScottS

CSS 만 사용하여 수행 할 수 있습니다. 하나의 방법은 내 대답이다. 링크 대신 체크 박스 나 라디오 버튼을 사용하는 옵션도 있습니다 : checked pseudo-class 및 형제 선택자 :) – Ana

: 여기

는 내 코드의 예외 CSS :

.dropdown-menu {display: none;} 

.dropdown-toggle:active + .dropdown-menu, 
.dropdown-toggle:focus + .dropdown-menu, 
.dropdown-menu:hover {display: block;} 

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

주는 : 코를 클릭하면 드롭 다운이 열립니다 말다. 당신은뿐만 아니라 호버에 열을하고자하는 경우, 당신은 코멘트에서 언급 한 바와 같이

.dropdown-toggle:hover + .dropdown-menu, 
.dropdown-toggle:active + .dropdown-menu, 
.dropdown-toggle:focus + .dropdown-menu, 
.dropdown-menu:hover {display: block;}

이 필요합니다,이 방법은 문제가있다 : 드롭 외부에 커서를 이동 한 다음 드롭 다운 내에서 클릭 후 내려 ... 닫힙니다. 이 문제는 해결하지만,

... 다른 방법은 그것을 할 ...이 할 수 없습니다 대신이 경우는 CSS에서 링크

<input data-toggle="dropdown" type='checkbox' name='dropdown-toggle' id='dropdown-toggle' class='dropdown-toggle'/> 
<label for='dropdown-toggle'>Kontakt <b class="caret"></b></label>

의 레이블이 체크 박스를 사용하여 다음과 같습니다

.dropdown-toggle, .dropdown-menu {display: none;} 
.dropdown-toggle:checked ~ .dropdown-menu, .dropdown-menu:hover {display: block;} 
.dropdown-toggle:focus {outline:none;}

데모 http://dabblet.com/gist/2794382

출처

2012-05-26 16:12:42 Ana

감사합니다! :-) 하나의 작은 문제 여전히 : 레이블을 클릭 한 다음 curosr로 밖에 나가면 메뉴는 여전히 닫힙니다. – hazelnut

이것은 해결책에 가까워졌습니다. (그리고 제가 생각하고있는 것의 라인을 따라있었습니다.) 나는 그것과 함께 하나의 버그를 겪는다 (파이어 폭스에서는 다른 것에 대해 모른다). 'input' 필드를 클릭 한 다음 마우스를 왼쪽으로 이동하면 "Kontakt"(클릭하지 않고 움직이는 것)가 사라집니다. – ScottS

이것은 버그가 아니며 정상입니다. 드롭 다운에는 Kontakt 버튼에 포커스가 있거나 마우스 커서가있는 한 차단 : 표시가 있습니다. 이 문제를 해결할 수있는 유일한 방법은 링크를 사용하지 않는 것입니다. 또한 데모를 만들 것입니다. – Ana

드롭 다운 메뉴의 contactform

답변

관련 문제