搜外网>搜外问答>问答页面

如何把导航设置成左右滑动? 悬赏11元 已结束

<!-- 头部 start -->
<div class="header">
<div class="top">
<a class="logo" href="/"><img src="/picture/logo.png" width="110" height="50" alt="{seacms:sitename}" /></a>
<div class="search">
<form id="frm_search" class="search-box" name="frm_search" action="/search.php" method="post" onsubmit="return search_submit();">
<input type="hidden" name="show" value="title">
<input value="输入关键词" onFocus="this.value=''" id="keyboard" name="searchword" class="search-text" type="text" size="60">
<button class="search-submit" onclick="return search_submit();" type="image"></button>
</form>
</div>
</div>
<div class="meau">
<ul>
<li><a href="/">首页1</a></li>
<li><a href="/">首页2</a></li>
<li><a href="/">首页3</a></li>
<li><a href="/">首页4</a></li>
<li><a href="/">首页5</a></li>
<li><a href="/">首页6</a></li>
</ul>
</div>
</div>

-----------------

上面是我的头部代码,我想修改为演示:https://www.jq22.com/demo/jQueryHdNav201710101934/[?]    (第3种导航模式应该如何修改呢)


想要的效果是:



比较懂的大哥,能不能详细帮忙CSS,js,都帮我搞上去,没用的CSS帮我删除掉。我怕放到网站去会冲突。万分感谢啦!

追加问题
    12 人参与回答
最佳回答
Z、先生 等 1 人赞同该回答

<style>
/滑动样式-----------------/
.menu {position:relative;height:3rem;width:100%;overflow:hidden;margin:0 auto;border-bottom:1px solid #ccc}
.menu .scroller {position:absolute}
.menu .scroller li {display:block;height:3rem;color:#333;float:left;line-height:3rem;font-size:}
.menu .scroller li a{color:#333;display:block;margin:0 .3rem;font-size:}
.menu .scroller li {color:#1cbb9b;height: solid #1cbb9b}
</style>
<div class="menu" id="retr">
<div class="scroller">
<ul>
<li><a href="#">全部科目</a></li>
<li><a href="#">会计从业</a></li>
<li><a href="#" class="cur">会计职称</a></li>
<li><a href="#">注会</a></li>
<li><a href="#">税务师</a></li>
<li><a href="#">国际证书</a></li>
<li><a href="#">更多注会</a></li>
<li><a href="#">国际证书2</a></li>
<li><a href="#">更多4</a></li>
<li><a href="#">更多5</a></li>
</ul>
</div>
</div>
<script src="jquery/"></script>
<script type="text/javascript" src="JS/"></script>
<script type="text/javascript" src="js/"></script>
<script type="text/javascript">
$(function(){
$('.menu').navbarscroll();
});
</script>

$(function(){
$('.menu').navbarscroll();
});

柠檬树上
柠檬树上 · 重庆不孕不育医院相关的不孕治疗及诊疗服务

我也是进来学习的

你这个直接网上搜一大堆

Planck
Planc · 高低温试验箱,耐气候试验箱,稳定性试验箱

进来学下一下的,哈哈

这个需要在代码里面设置

胡汉三
胡汉三 · 上海沈泉泵阀公司

这是前端的问题啊

八九神真宵
八九神真宵 · 擅长高新企业认定、知识产权等代理,微信公众号:企业顶层规划师→→→→→→→→点→→→→→→→这→→→→→→→里→→→

把这条代码插入到标签中就可以模仿出那个样式

.meau{
overflow:hidden;}
.meau ul li{
float:left;
padding:20px;}
.meau li a{
text-decoration:none;
color:#000;}
.meau li a:hover{
color:#3FC;
border-bottom:4px #00CCCC solid;}

科曼曼
科曼曼 · 装修、装饰、家装、整装-海天装饰公司!!

优秀,优秀。加油加油

你这个代码要稍微改造一下的,完整代码下载:https://themeol点com/zb_users/upload/2022/01/demo点zip

注:把点改为. 然后浏览器运行网址即可。

素材网
素材网 · 素材网,网站模板,网站素材,视频教程,sucaipro。com

楼下回复一下这个问题

SEO培训招生中
162