होवर

Question

पर दिखाई देने वाली छिपी साइडबार मैं डिफ़ॉल्ट रूप से छिपी हुई साइडबार बनाने की कोशिश कर रहा हूं लेकिन यह होवर पर दिखाई देता है। सबसे नज़दीकी उदाहरण मैं सोच सकता हूं यह है: http://www.sidlee.com/। जब आप होम पेज से बाहर के किसी भी पेज पर हों, तो साइडबार केवल संख्या दिखाता है। एक बार जब आप इस क्षेत्र में अपना माउस ले जाते हैं, तो साइडबार टेक्स्ट दिखाने के लिए फैलता है। मुझे लगता है कि जावास्क्रिप्ट के साथ ऐसा करने का एक तरीका है लेकिन मैं कोई विशेषज्ञ नहीं हूं इसलिए मैं यहां कोई मेरी मदद कर सकता हूं।

Answer 1

सिर्फ एक सरल उदाहरण है, लेकिन उम्मीद है कि यह सही रास्ते :)

सीएसएस पर आप रखा जाएगा कि:

#nav{width:200px;height:100%;position:absolute;top:0;left:0;z-index:100;background:#111;color:#fff;overflow:hidden;} 
#nav ul{margin:0;padding:0;width:200px;margin:10px;list-style:none;} 
#nav a span{margin:0 10px 0 0;} 
#nav a{color:#fff;font-size:14px;text-decoration:none;} 

jQuery:

$(function(){ 
    $('#nav').hover(function(){ 
     $(this).animate({width:'200px'},500); 
    },function(){ 
     $(this).animate({width:'35px'},500); 
    }).trigger('mouseleave'); 
}); 

HTML:

<div id="nav"> 
<ul> 
<li><a href=""><span>01</span> HomePage</a></li> 
<li><a href=""><span>02</span> SubPage 1</a></li> 
<li><a href=""><span>03</span> SubPage 2</a></li> 
<li><a href=""><span>04</span> SubPage 3</a></li> 
<li><a href=""><span>05</span> SubPage 4</a></li> 
</ul> 
</div> 

यदि आप केवल संख्या शुरू में (समापन एनीमेशन ऑनलोड के बिना) दिखाने #nav{width:35px;} बदल सकते हैं और हटाने .trigger('mouseleave')

चीयर्स

जी

Answer 2

आप जब एक .mouseenter() घटना होती है एक div स्लाइड बाहर करने के लिए .animate() साथ संयोजन के रूप में JQuery के .hover() विधि का उपयोग कर सकते हैं।

JQuery API for Hover

Answer 3

बस दूर jQuery API में प्लग शुरू करते हैं। इस तरह आप इसकी संरचना शुरू करेंगे। .animate() का उपयोग करके आप अपने मेनू सीएसएस गुणों को समायोजित करने की क्षमता देंगे जो आप फिट देखते हैं।

$("#yourmenu").hover(function() { 
    $(this).stop(true,true); 
    $(this).show(); 
}, function() { 
    $(this).hide(); 
}); 

Answer 4

Edvard,

मैं इस निम्नलिखित तरीके का सुझाव देते हैं चाहते हैं। उम्मीद है कि कुछ विचारों और सही jQuery तत्वों के कुछ लिंक के साथ आपको यह करने में सक्षम होना चाहिए।

पहला कदम एक div होना चाहिए जो 100% पारदर्शी है और इसमें एक div जिसमें मेनू है। फिर मेनू div से मैं उस तत्व को छुपा दूंगा, फिर जब आप कंटेनर डाइव पर माउस करते हैं तो आप आंतरिक div के स्लाइड को एनिमेट करने के लिए .hover() विधि का उपयोग कर सकते हैं।

यहां कुछ बुनियादी कोड है जो आपको शुरू करना चाहिए।

<div id="menuContainer"> 
    <div id="menu"> 
     <ul> 
      <li>This</li> 
      <li>Is</li> 
      <li>A</li> 
      <li>Menu</li> 
     </ul> 
    </div> 
</div> 

फिर कुछ सीएसएस:

/* Set the container to be fixed to the top of the screen and set it's height 
    This is important so we know where the mouse can hover */ 
div#menuContainer { 
    background: transparent; 
    position: fixed; 
    top: 0; 
    left: 0; 
    height: 50px; 
} 

/* Set the menu as hidden */ 
div#menu { 
    background: red; 
    width: 900px; 
    height: 
    margin: 0 auto; 
    display: none; 
} 

/* Fiddle with the menu items */ 
div#menu ul { list-style-type: none; } 
div#menu ul li { display: inline; } 

फिर कुछ jQuery:

$('#menuContainer').mouseenter(function(){ 
    $('#menu').slideToggle(); 
}).mouseleave(function() { 
    $('#menu').slideToggle(); 
}); 

यह स्पष्ट रूप से अपरीक्षित कोड है, लेकिन यह आप के लिए एक महान headstart दे चाहिए! :-)

Answer 5

करना चाहते हैं एक तरह से कैसे वास्तव में जावास्क्रिप्ट या jQuery के बिना यह करने के लिए मिला। यह उत्तर उन लोगों के लिए बहुत प्रभावी हो सकता है जो यूनी/कॉलेज असाइनमेंट पर काम कर रहे हैं, और JQuery जैसे तृतीय पक्ष पुस्तकालयों का उपयोग नहीं कर सकते हैं।

जाहिर है कि, JQuery का उपयोग करके कम कोड में एक ही परिणाम देगा।

ये रहा:

.fa { 
 
    position: relative; 
 
    display: table-cell; 
 
    width: 60px; 
 
    height: 36px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 20px; 
 
} 
 
.main-menu:hover, 
 
nav.main-menu.expanded { 
 
    width: 250px; 
 
    overflow: visible; 
 
} 
 
.main-menu { 
 
    background: #fbfbfb; 
 
    border-right: 1px solid #e5e5e5; 
 
    position: absolute; 
 
    top: 0; 
 
    bottom: 0; 
 
    height: 100%; 
 
    left: 0; 
 
    width: 60px; 
 
    overflow: hidden; 
 
    -webkit-transition: width .05s linear; 
 
    transition: width .05s linear; 
 
    -webkit-transform: translateZ(0) scale(1, 1); 
 
    z-index: 1000; 
 
} 
 
.main-menu>ul { 
 
    margin: 7px 0; 
 
} 
 
.main-menu li { 
 
    position: relative; 
 
    display: block; 
 
    width: 250px; 
 
} 
 
.main-menu li>a { 
 
    position: relative; 
 
    display: table; 
 
    border-collapse: collapse; 
 
    border-spacing: 0; 
 
    color: #999; 
 
    font-family: arial; 
 
    font-size: 14px; 
 
    text-decoration: none; 
 
    -webkit-transform: translateZ(0) scale(1, 1); 
 
    -webkit-transition: all .1s linear; 
 
    transition: all .1s linear; 
 
} 
 
.main-menu .nav-icon { 
 
    position: relative; 
 
    display: table-cell; 
 
    width: 60px; 
 
    height: 36px; 
 
    text-align: center; 
 
    vertical-align: middle; 
 
    font-size: 18px; 
 
} 
 
.main-menu .nav-text { 
 
    position: relative; 
 
    display: table-cell; 
 
    vertical-align: middle; 
 
    width: 190px; 
 
    font-family: 'Titillium Web', sans-serif; 
 
} 
 
.main-menu>ul.logout { 
 
    position: absolute; 
 
    left: 0; 
 
    bottom: 0; 
 
} 
 
.no-touch .scrollable.hover { 
 
    overflow-y: hidden; 
 
} 
 
.no-touch .scrollable.hover:hover { 
 
    overflow-y: auto; 
 
    overflow: visible; 
 
} 
 
a:hover, 
 
a:focus { 
 
    text-decoration: none; 
 
} 
 
nav { 
 
    -webkit-user-select: none; 
 
    -moz-user-select: none; 
 
    -ms-user-select: none; 
 
    -o-user-select: none; 
 
    user-select: none; 
 
} 
 
nav ul, 
 
nav li { 
 
    outline: 0; 
 
    margin: 0; 
 
    padding: 0; 
 
} 
 
.main-menu li:hover>a, 
 
nav.main-menu li.active>a, 
 
.dropdown-menu>li>a:hover, 
 
.dropdown-menu>li>a:focus, 
 
.dropdown-menu>.active>a, 
 
.dropdown-menu>.active>a:hover, 
 
.dropdown-menu>.active>a:focus, 
 
.no-touch .dashboard-page nav.dashboard-menu ul li:hover a, 
 
.dashboard-page nav.dashboard-menu ul li.active a { 
 
    color: #fff; 
 
    background-color: #5fa2db; 
 
} 
 
.area { 
 
    float: left; 
 
    background: #e2e2e2; 
 
    width: 100%; 
 
    height: 100%; 
 
} 
 
@font-face { 
 
    font-family: 'Titillium Web'; 
 
    font-style: normal; 
 
    font-weight: 300; 
 
    src: local('Titillium WebLight'), local('TitilliumWeb-Light'), url(http://themes.googleusercontent.com/static/fonts/titilliumweb/v2/anMUvcNT0H1YN4FII8wpr24bNCNEoFTpS2BTjF6FB5E.woff) format('woff'); 
 
}

<html> 
 

 
<head> 
 
</head> 
 

 
<body> 
 
    <div class="area"></div> 
 
    <nav class="main-menu"> 
 
    <ul> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-home fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Dashboard 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li class="has-subnav"> 
 
     <a href="#"> 
 
      <i class="fa fa-laptop fa-2x"></i> 
 
      <span class="nav-text"> 
 
          UI Components 
 
         </span> 
 
     </a> 
 

 
     </li> 
 
     <li class="has-subnav"> 
 
     <a href="#"> 
 
      <i class="fa fa-list fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Forms 
 
         </span> 
 
     </a> 
 

 
     </li> 
 
     <li class="has-subnav"> 
 
     <a href="#"> 
 
      <i class="fa fa-folder-open fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Pages 
 
         </span> 
 
     </a> 
 

 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-bar-chart-o fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Graphs and Statistics 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-font fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Typography and Icons 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-table fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Tables 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-map-marker fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Maps 
 
         </span> 
 
     </a> 
 
     </li> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-info fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Documentation 
 
         </span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 

 
    <ul class="logout"> 
 
     <li> 
 
     <a href="#"> 
 
      <i class="fa fa-power-off fa-2x"></i> 
 
      <span class="nav-text"> 
 
          Logout 
 
         </span> 
 
     </a> 
 
     </li> 
 
    </ul> 
 
    </nav> 
 
</body> 
 

 
</html>

आशा इस मदद करता है :)