小编Hug*_*inn的帖子

[对不起如果这对任何人来说都是重复的,管理员会要求我将其移至溢出]

我正在使用DIVI主题并对其进行一些相对简单的修改以更好地满足我的需求.有一件事我遇到了一些困难,但令人惊讶的是将其垂直菜单的悬停状态下拉到了onclick功能.

我在下面汇总了下面代码的示例:JSFIDDLE

$('ul.top-menu').children('.menu-item-has-children').click(function(){
    $(this).children('.sub-menu').slideToggle('slow');
}).children('ul').find('.menu-item').click(function (event) { //select all the `.child` elements and stop the propagation of click events on the elements
    event.stopPropagation();
    return false;
});

奇怪的是,虽然我似乎无法从菜单中删除悬停状态功能.DIVI的一个例子可以在这里找到:DIVI

注意:您需要转到导航中的标题,然后选择深色垂直导航来复制我的布局.

提前感谢您的想法!

一旦您从手机设备查看,http://healthunit.com在屏幕顶部有一个干净的水平滚动菜单.我正在尝试模仿相同的功能,这要归功于我正在使用大量导航元素重新设计的网站.

要求:

1. 左右滚动单击选项
2. 以空间为中心的居中列表项选项
3. 一次只能看到一个列表项
4. 横向滚动和响应
5. 单击列表中的最后一个或第一个选项将转到列表中的第一个选项或最后一个选项

我此部分的当前HTML是:

<nav id="sub" class="clearfix">
  <ul class="wrapper">
    <a href="#"><li>Estimate</li></a>
    <a href="#"><li>About</li></a>
    <a href="#"><li>Customer Information</li></a>
    <a href="#"><li>Financing</li></a>
    <a href="#"><li>Careers</li></a>
    <a href="#"><li>Locate Us</li></a>
    <a href="#"><li>Inspiration</li></a>
  </ul>
</nav>

目前附加到它的CSS是:

nav#sub {
  background: #004173;
  background: linear-gradient(to bottom, #004173 0%,#014f8d 100%);
  background: -moz-linear-gradient(top, #004173 0%, #014f8d 100%);
  background: -ms-linear-gradient(top, #004173 0%,#014f8d 100%);
  background: -o-linear-gradient(top, #004173 0%,#014f8d 100%);
  background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#004173), color-stop(100%,#014f8d));
  background: -webkit-linear-gradient(top, #004173 0%,#014f8d 100%);
  border-bottom: #00325a solid 3px;
  box-shadow: 0 4px …

所以我想在悬停时出现一个图像旋转按钮.我以为我有一些CSS的想法,但我必须做错了.看到我的小提琴:小提琴

提前致谢

CSS

body {
    font-family: sans-serif;
}

#foo {
    width:100px;
    height:100px;
    position:absolute;
    top:20px;
    left:20px; 
    border-spacing: 0;
    background:none;
    transition: all 1s ease;
}

button {display:none;}

#foo img {width:100%;}
  #foo img:hover button {display: block;}

JS

function rotateFoo(){
    var angle = ($('#foo').data('angle') + 1080) || 1080;
    $('#foo').css({'transform': 'rotate(' + angle + 'deg)'});
    $('#foo').data('angle', angle);
}