화면 상단에 고정 된 메뉴 및 로고 고정

-4

콘텐츠 페이징을 통해 화면 상단에 고정되는 로고와 메뉴 막대를 얻으려고합니다. 그런 다음 마우스를 올려 놓으면 짧은 수평 메뉴가 나타나고, 항목 중 하나에 추가 드롭 다운 하위 메뉴가 있습니다.화면 상단에 고정 된 메뉴 및 로고 고정

나는 이처럼 약간의 JavaScript를 사용하려고했지만 특정 너비 이상의 페이지에서는 작동하지 않는다는 것을 알았습니다.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 

"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<html xmlns="http://www.w3.org/1999/xhtml"> 
<head> 
<title></title> 
<meta http-equiv="Content-Type" content="text/html; charset=windows-1256" /> 
<style type="text/css"> 
<!-- 
    /* set the menu style */ 
    #menu1 {position: absolute;left:0px;;width: 745px;} 
    .menuHead { font-weight: bold; font-size: larger; background-color: #A9A9A9;height:40px;padding-top:10px; text-align:center; 
    background-image: -webkit-linear-gradient(left, #b4872a, #ffe792, #b4872a); 
    background-image: -moz-linear-gradient(left, #b4872a, #ffe792, #b4872a); 
    background-image: -ms-linear-gradient(left, #b4872a, #ffe792, #b4872a); 
    background-image: -o-linear-gradient(left, #b4872a, #ffe792, #b4872a);} 
    .menuChoices { background-color: #000; /*opacity:0.4;filter:alpha(opacity=40);*/height:70px;padding-top:35px;} 
    .menu a {color: #e3c96b; text-decoration: none;margin:0px 25px;} 
    .menu a:hover {text-decoration: underline;} 
    /* position your menus */ 
--> 
</style> 
<script type="text/javascript"> 
<!-- 
/* we'll only allow DOM browsers to simplify things*/ 
(document.getElementById ? DOMCapable = true : DOMCapable = false); 
function hide(menuName) 
{ 
if (DOMCapable) 
    { 
    var theMenu = document.getElementById(menuName+"choices"); 
    theMenu.style.visibility = 'hidden'; 
    } 
} 
function show(menuName) 
{ 
if (DOMCapable) 
    { 
    var theMenu = document.getElementById(menuName+"choices"); 
    theMenu.style.visibility = 'visible'; 
    } 
} 
//--> 

</script> 
</head> 
<body> 
<div id="menu1" class="menu" onmouseover="show('menu1');" onmouseout="hide('menu1');"> 
    <div class="menuHead">M E N U</div> 
     <div id="menu1choices" class="menuChoices"> 
     <a href="http://www.google.com">menu1</a> 
     <a href="http://www.yahoo.com">menu2</a> 
     <a href="http://www.teoma.com">menu3</a> 
     <a href="http://www.msn.com">menu4</a> 
     <a href="http://www.altavista.com">Country Selector</a> 
     </div> 
</div> 
<script type="text/javascript"> 
<!-- 
/* Don't hide menus for JS off and older browsers */ 
if (DOMCapable) 
{ 
    hide("menu1"); 
} 
//--> 
</script> 
</body> 
</html>

는 그래서 내가 그것을 그 대신에 작업을 얻을 수 있는지 확인하기 위해 <ul><li>으로 그 일을 갈이의 생각.

출처

2013-05-26 JayUK

실제로. 메뉴 = 목록. –

처음부터 자바 스크립트를 작성하는 대신 Twitter Bootstrap과 같은 오픈 소스 대안을 탐색 할 수 있습니다. JQuery UI을 사용해보세요. 이들은 귀하의 요구 사항을 충족시킬 수있는 빠른 대안 중 일부입니다.

더 나은 이해를 위해 소스 코드를 참조 할 수 있습니다. 트위터 부트 스트랩에서 언급 한 것과 똑같은 기능을 보았습니다. 그러니 한번 사용해보십시오.

출처

2013-05-26 12:45:36

오, 훌륭해. 내가 한번 보게, 고마워. 나는 Joomla 그것을 작동하고 부트 스트랩 어떻게 든 통합되어 있습니다 알아요. 건배. – JayUK

화면 상단에 고정 된 메뉴 및 로고 고정

답변

관련 문제