Result
jQuery
//マウスホバーイベント$('li a').hover(function() { var p = $(this).position().left; //マウスが乗るとclass="arrow"がアニメーションでポジションを変更 $('.arrow').animate({ //数値で位置を決める・・これだと汎用性が無いね:( left: (p + 60) + 'px'});}, function() {}); |
css
.content { position: absolute; width: auto; height: 400px; }.arrow {/*矢印部分*/ position: absolute; margin-top: 0px; border-color: #696868 transparent; border-style: solid; border-width: 10px 10px 0px 10px; height: 0px; width: 0px;}.options ul { margin-top: 20px; margin-left: 20px; padding: 0; float: left; } .options ul li { display: inline; } .options ul li a { font-family: Arial; font-size: 14px; float: left; text-decoration: none; color: #696868; padding: 4px; margin-left: 50px; outline: 0; border: 0; display: block ; width: 50px ; } .options ul li a:hover { color: #666; }.menu { width: auto; height: 60px; background-color: #e2f2fd; } .head { width:auto; height: 25px; background: #696868; } |
html
<div class="content"><div class="head"></div> <div class="arrow"></div><!--矢印部分--> <div class="menu"> <div class="options"> <ul> <li><a href="#">List01</a></li> <li><a href="#">List02</a></li> <li><a href="#">List03</a></li> <li><a href="#">List04</a></li> <li><a href="#">List05</a></li> </ul> </div> </div></div> |
Warning: include(/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php): Failed to open stream: No such file or directory in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
Warning: include(): Failed opening '/home/youhei0828/kachibito.net/public_html/wp-content/themes/cocoon-master/my-php/jquery-other-snippets.php' for inclusion (include_path='.:/opt/php-8.1.29/data/pear') in /home/youhei0828/kachibito.net/public_html/wp-content/themes/kachibito7_with_cocoon_child/functions-module/shortcode/add-post-myphp.php on line 7
