kostenloser Webspace werbefrei: lima-city

Suche auf lima-city

  • in: Navigationsleiste Automatisch Schließen

    geschrieben von sgtest53

    Danke prinz-und-gloeckner,
    Also soll ich folgendes in der navi.css hinzufügen?

    body > nav#navi > div.container-fluid {display: block}
body > nav#navi:not(:target) > div.container-fluid {display: none}


    und bzw. das... 

    body > nav#navi > div.container-fluid {display: none}
body > nav#navi:target > div.container-fluid {display: block}


    Muss ich da noch etwas in der Navigationsleiste.html ändern/anpassen? Wenn ja, an welcher Stelle und was muss ich da noch ändern?

  • in: Navigationsleiste Automatisch Schließen

    geschrieben von sgtest53

    Hallo prinz-und-gloeckner,
    vielen Dank für deine Hilfe!

    Ich möchte das sich meine Navigationsleiste genauso verhält wie es bei der Demo zu sehen ist.

    Demo:
    https://www.jqueryscript.net/demo/Better-Bootstrap-Nav-jQuery/

    Was muss ich bei meiner Naviationsleiste ändern, damit diese sich Automatisch schließt, wenn ich außerhalb der Navigationsleiste tippe bzw. mit der Maus klicke.

  • in: Navigationsleiste Automatisch Schließen

    geschrieben von sgtest53

    Hallo,
    ich habe eine Responsive Navigationsleiste erstellt und diese per Server Side Includes in die Index.html eingebunden. Das funktioniert auch gut Siehe Link:
    https://sgtest53.lima-city.de/

    Nun zu meinem kleinen Problem:
    Ich möchte das sich die Navigationsleiste und die untermenü Automatisch Schließt, wenn ich ausserhalb der Navigationsleiste klicke. Was muss ich ändern damit dieses funktioniert?

    Index.html
    <!DOCTYPE html><html lang="de">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<meta name="googlebot" content="noodp"/>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=2">
<link href="css/navi.css" rel="stylesheet" type="text/css">
<link href="css/design.css" rel="stylesheet" type="text/css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="js/2.2.0-jquery.js"></script>
<script src="js/navi.js"></script>
</head>
<body>
<content>
<div id="Navigationsleiste"><!--#include virtual="Navigationsleiste.html" --></div>
</content>
</body>
</html>


    Navigationsleiste.html
    <!doctype html>
<html>
<head>
</head>
<body>
<a class="menu-link" href="#menu">Menü</a>
<nav id="menu" class="menu">
	<ul>
		<li><a href="index.html">Home</a></li>
		<li class="has-submenu"><a href="#">Seite-1</a>
			<ul class="sub-menu">
				<li><a href="#.html">Seite-1-a</a></li>
				<li><a href="#.html">Seite-1-b</a></li>
				<li><a href="#.html">Seite-1-c</a></li>
   			</ul>
		</li>
		<li><a href="#.html">Seite-2</a></li>
		<li><a href="#.html">Seite-3</a></li>
		<li><a href="#.html">Seite-4</a></li>
	</ul>
</nav>
</body>
</html>


    design.css
    /*A1 Name der Homepage */
html {
height:100%;
}

body {
-webkit-background-size:cover;
background-attachment:fixed;
background-image: url("");
background-position:center;
background-repeat:no-repeat;
background-size: cover;
font-family:helvetica, arial, "lucida grande", verdana, メイリオ, "ＭＳ Ｐゴシック", sans-serif;
min-width:200px;
overflow-x:hidden;
margin:0; padding:0 10px; 
}

content {
border-radius:10px;
clear:both;
display:block;
float:none;
margin:25px auto 0;
min-height:720px;
padding:50px -15px 0;
width:960px;
}

@media only screen and (max-width: 1023px) {
content {
width:720px;
}
}

@media only screen and (max-width: 767px) {
content {
width:530px;
}
}

@media only screen and (max-width: 568px) {
content {
width:420px;
}
}

@media only screen and (max-width: 480px) {
content {
width:100%;
}
}


    navi.css
    @media all and (min-width: 1025px) {
.menu-link { display: none;}
.menu { float: left;
  -webkit-transition: all 0.3s ease;  
  -moz-transition: all 0.3s ease;
  -ms-transition: all 0.3s ease;
  transition: all 0.3s ease; }
.menu ul { padding-top: 0px; padding-bottom: 0px; padding-left:0px; margin-top: 25px; margin-right: 0px; margin-left: 0px; margin-bottom: 25px; list-style: none; position: relative; display: inline-table; border: 1px solid #a8070d; width: 960px; text-align: left; background-color: #a8070d; border-radius: 10px;}
.menu ul a:hover { color: #fff; }
.menu > li > ul.sub-menu { min-width: 10em; padding: 4px 0; background-color: #f4f4f4; border: 1px solid #CCC; }
.menu ul li { padding: 0px 4%; }
.menu > ul > li { display: inline-block; }
.menu ul li a { display: block; text-decoration: none; color: #FFF; font-size: 18px; font-family:  arial, sans-serif; }
.menu ul li > a { text-align: center; padding-top: 10px; padding-bottom: 10px; padding-left: 3px; padding-right: 3px; margin-left: 0px; margin-right: 0px; width: 98px;}
.menu ul ul { display: none; list-style-type:none; position: absolute; border: 1px solid #a8070d; width: 157px; border-radius: 0px; margin-top:0px; margin-left: -18px; }
.menu ul li:hover > ul { display: block; }
.menu ul ul > li { position: relative; }
.menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #a8070d; text-align:center; width:142px; margin-left:0px;border: 1px solid #921515;}
.menu ul ul > li a:hover {color: #fff; }
.menu ul ul ul { position: absolute; left: 100%; top:0; }
}

@media all and (max-width: 1024px) {
.example-header .container { width: 100%; }
a.menu-link { display: block; color: #fff; background-color: #a8070d; border-radius: 10px; float: left; text-decoration: none; padding-top: 10px; padding-bottom: 10px; margin-top:25px; margin-bottom:0px; width: 100%; text-align: center; font-size: 18px; font-family:  arial, sans-serif;}
.menu { clear: both; min-width: inherit; float: none; }
.menu, .menu > ul ul { overflow: hidden; max-height: 0; }
.menu > li > ul.sub-menu { padding: 0px; border: none; }
.menu.active, .menu > ul ul.active { max-height: 55em; }
.menu ul { padding-top: 0px; padding-bottom: 0px; padding-left:0px; margin-top: 0px; margin-right: 0px; margin-left: 0px; margin-bottom: auto; list-style: none; position: relative;	display: block;	border: 1px solid #050505; width: 100%; text-align: center; background-color: #a8070d; }
.menu > ul { border-top: 1px solid #921515; }
.menu > ul a:hover { color: #fff; }
.menu ul li a { display: block; text-decoration: none; color: #FFF; font-size: 20px; font-family:  arial, sans-serif; }
.menu li, .menu > ul > li { display: block; }
.menu li a { color: #000; display: block; padding-top: 5px; padding-bottom: 5px; border-bottom: 1px solid #921515; position: relative; }
.menu li.has-submenu > a:after { content: '+'; position: absolute; top: 0; right: 0; display: block; font-size: 1.5em; padding: 0px 0.5em; }
.menu li.has-submenu > a.active:after { content: "-"; }
.menu ul ul > li a { padding: 5px 15px 5px 10px; height: auto; background-color: #a8070d; }  
.menu ul ul > li a:hover {color: #fff; }
.menu ul ul, .menu ul ul ul { display: inherit; position: relative; left: auto; top:auto; border:none; }
}

@media only screen and (max-width: 767px) {
a.menu-link { font-size: 18px;}
.menu ul li a { font-size: 18px; }
}

@media only screen and (max-width: 568px) {
a.menu-link { font-size: 16px;}
.menu ul li a {font-size: 16px}
}

@media only screen and (max-width: 480px) {
a.menu-link { font-size: 18px;font-size: 3.8vw}
.menu ul li a {font-size: 18px;font-size: 3.8vw}
}


    navi.js
    var s1 = jQuery.noConflict();

s1( document ).ready( function( s1 ) {

	var s1menu = s1('#menu'),
	  s1menulink = s1('.menu-link'),
	  s1menuTrigger = s1('.has-submenu > a');

	s1menulink.click(function(e) {
		e.preventDefault();
		s1menulink.toggleClass('active');
		s1menu.toggleClass('active');
	});

	s1menuTrigger.click(function(e) {
		e.preventDefault();
		var s1this = s1(this);
		s1this.toggleClass('active').next('ul').toggleClass('active');
	});

});


    Vielen Dank für eure Hilfe im voraus! :wave:

  • in: Javascript und jQuery gleichzeitig verwenden?

    geschrieben von sgtest53

    Das steht in der Konsole!

    Die Ressource auf "https://connect.facebook.net/de_DE/sdk.js#xfbml=1&version=v2.0" wurde blockiert, weil der Tracking-Schutz aktiviert ist.[Weitere Informationen]

    index.html
    getPreventDefault() sollte nicht mehr verwendet werden. Verwenden Sie stattdessen defaultPrevented.
    jquery.min.js:2:40351

    Synchrone XMLHttpRequests am Haupt-Thread sollte nicht mehr verwendet werden, weil es nachteilige Effekte für das Erlebnis der Endbenutzer hat. Für weitere Hilfe siehe http://xhr.spec.whatwg.org/ jquery.min.js:2:85840

  • in: Javascript und jQuery gleichzeitig verwenden?

    geschrieben von sgtest53

    Hallo,
    ich möchte auf eine Seite Javascript und jQuery gleichzeitig verwenden.
    Javascript von meiner Navikationsleiste!

    var s1 = jQuery.noConflict();

s1( document ).ready( function( s1 ) {

	var s1menu = s1('#menu'),
	  s1menulink = s1('.menu-link'),
	  s1menuTrigger = s1('.has-submenu > a');

	s1menulink.click(function(e) {
		e.preventDefault();
		s1menulink.toggleClass('active');
		s1menu.toggleClass('active');
	});

	s1menuTrigger.click(function(e) {
		e.preventDefault();
		var s1this = s1(this);
		s1this.toggleClass('active').next('ul').toggleClass('active');
	});

});

    Wenn ich das jQuery script einfüge, dann funktioniert u.a. die Navikationsleiste nicht mehr.
    <script type="text/javascript">jQuery.noConflict();</script>
<script type="text/javascript">
(function($){
        $(window).load(function(){
            $("body,#Trikotbescheibung-Box-3-2-3-4").mCustomScrollbar({
					scrollInertia:10
				});
        });
    })(jQuery);
</script>

    Vielen Dank für eure Hilfe!
    sgtest53

  • in: Javascript ausfüren bestimmte Fensterbreite

    geschrieben von sgtest53

    Ich verstehe das nicht. :holy:

  • in: Javascript ausfüren bestimmte Fensterbreite

    geschrieben von sgtest53

    Hallo ggamee,
    danke für dein Hilfe.

    Diesen Code

    window.addEventListener('resize', function () { /* check window.innerWidth */}


    soll ich jetzt mit ein if abfrage einbauen.

    $(function(){
    $('#inner-content-div2').slimScroll({
        height: '615'
    });
});


    Wie mache ich das, damit es dann geht? Ich kenne mich nicht so gut mit Javascript aus.
    Mit freundlichen Grüßen
    Marco

  • in: Javascript ausfüren bestimmte Fensterbreite

    geschrieben von sgtest53

    Hallo, ich möchte das script nur ausführen, wenn die Fensterbreite mehr als 1023px beträgt, sonst soll es aus bleiben. Wie kann ich das am besten machen?

    $(function(){
    $('#inner-content-div2').slimScroll({
        height: '615'
    });
});


    Hier ist ein link zum kompletten script (slimScroll).

    http://rocha.la/jQuery-slimScroll

    Vielen Dank für eure Hilfe!

Login zum Webhosting ohne Werbung!

Hast Du schon kostenlosen Webspace oder bist Du auf der Suche nach WordPress-Hosting mit Staging-Funktion und wp-cli? Jetzt günstige Prepaid Domains registrieren!